css设置div圆角 |
您所在的位置:网站首页 › 怎么设置边框圆角 › css设置div圆角 |
昨天去面试,面试官一上来就开始问技术方面的问题,感觉很糟糕,很多知识点只记得大概,其中面试官提到怎么设置div文圆角,当时我就蒙了,虽然我是做后台的,之前听过说把按钮设置成圆角,但那都是前台的处理,也没多个心眼百度,哎!现在吃亏了。 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。 可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。 如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。 如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。 如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。 #rad { background:#FC9; border-radius:15px; padding:10px; width:300px; height:50px; } 除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性: * border-top-left-radius * border-top-right-radius * border-bottom-right-radius * border-bottom-left-radius一般的浏览器都支持上述的border-radius属性,早期版本的Firefox支持-moz-border-radius属性,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |