css用边框实现圆角矩形 | 您所在的位置:网站首页 › css如何设置圆角矩形背景图 › css用边框实现圆角矩形 |
今天要做一个圆角矩形的按钮,于是直接找圆角矩形的css实现方式,搞了半天,虽然也实现效果了,但是很复杂,需要用很多代码,后来突然想到以前做过的一个边框效果,也是圆角矩形,于是找了出来,发现这种办法相当简单并且效果一点也不差,这里简要分享一下。 关键部分都有注释。 div+CSS圆角矩形 .roundedRectangle{ height: 70px; width: 100px; margin-top: 100px; background: #9BD1FA;//背景色 border-width: 10px; //边缘的宽度,如果要分别设置可以这样:border-width: 15px 5px 15px 5px;依次为上、右、下、左 border-style: solid; border-radius: 15px; //圆角的大小 border-color: #000 #000 #000 #000; //边框颜色,依次为上、右、下、左 } .roundedRectangle p{ margin: 0px auto; padding: 20px; text-align:center; font-size: 20px; letter-spacing:8px; }测试 css的边框还有很多样式,还可以改变边框的属性来实现其他的效果,详情请看:http://www.w3school.com.cn/css/css_border.asp |
CopyRight 2018-2019 实验室设备网 版权所有 |