www.ctrt.net > Css3 内凹 圆角边框

Css3 内凹 圆角边框

要是写上面的这个图,就算了,太麻烦,兼容不好,直接写背景或者直接上图片吧。这个写完了border-radius还得写渐变,太麻烦。

div { width: 130px; height: 130px; border-radius: 4px; border:1px solid #333; box-shadow:inset 0 0 5px 5px #ccc;}只能在支持css3的浏览器下工作 其中,模拟凹槽线的重要代码是最后一行,几个数值分别为 x轴的阴影偏移量 y轴的阴影偏移量 ...

#gaga{border:3px solid #f00;border-radius: 5px 6px 7px 8px;} 5px代表的是左上角的弧度; 6px代表的是右上角的弧度; 7px代表的是右下角的弧度; 8px代表的是左下角的弧度; 希望可以帮到你

html标签如下 1 2 3 css标签如下 uls{list-style-type: none;*zoom: -1;} uls:after{content: "";clear: both;display: block;} uls li{display: block;float: left;width: 120px;height: 35px;background-color: #4169E1;text-align: center;li...

css代码: .yj{ padding:10px; width:300px; height:50px; border: 2px solid #000000; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } -moz-border-radius: 15px; -webkit-border-radius: 15px; 这两个是为了...

-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;

使用CSS3中的border-radius table{border-radius:5px;overflow:hidden} 如果需要单独针对某一个角设置为圆角可以使用下面代码 border-top-left-radius:5em;border-top-right-radius:5em;border-bottom-right-radius:5em;border-bottom-left-radi...

css3的新属性:border-radius 比较旧版本的IE不支持,, 不过可以通过一个HTML5.js来弥补。。。

圆角边框:border-radius: 8px(8px代表的是圆角弧度,可以根据自己的需要调整,需要注意的是这个属性的兼容性,在IE8以下的浏览器是不兼容的,也就是说,没效果); 阴影:box-shadow:x y z color(比如:box-shadow: 0px 0 13px rgba(100,100,10...

boder-radius可以分别设置四个角的值,顺序为左上、右上、右下、左下 代码如下: #div1{ border-radius:20px 0 0 20px; /*border-top-left-radius: 20px; border-bottom-left-radius: 20px;*/ } #div2{ border-radius: 0 20px 20px 0; /*border-...

网站地图

All rights reserved Powered by www.ctrt.net

copyright ©right 2010-2021。
www.ctrt.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com