html5圆角矩形样式css代码怎么写?

草莓荔枝加冰 建站知识 739

html5圆角矩形样式css代码怎么写?大兵这里分享的并不是图片圆角,讲的是CSS圆角纯代码,废话不多说,下面直接上干货。

html5圆角矩形样式css代码主要有3种方法:

第一种:CSS3圆角

#chaomao{
border-radius:2px 2px 2px 2px;
}

border-radius代码的4个数值,分别代表的是左上、右上、右下、右下4个角,分别以2px的圆角,当然也可以简写成border-radius:2px,顺序为左上到左下逆时针设置。
也可以写成以下这种形式:

#chaomao{
border-top-left-radius:4px 2px;
border-top-right-radius:3px 4px;
border-bottom-right-radius:6px 2px;
border-bottom-left-radius:3px 4px;
}

上面代表的意思也非常明确,稍微懂点CSS知识的同学就可以看懂。
注意:火狐等浏览器只支持私有圆角属性,例如border-radius(圆角):-moz-border-radius:2px,webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px,Opera支持border-radius(圆角):border-radius:2px,IE6~IE8不支持。

第二种:用CSS+html代码

百度知道搜索框圆角就是通过CSS+html代码实现,优点是可以兼容所有浏览器,缺点是需要另外添加html标签,后期维护比较麻烦,代码如下所示:

HTML代码:
<div>
<strong class=”b1″></strong>
<strong class=”b2″></strong>
<strong class=”b3″></strong>
<strong class=”b4″></strong>
<div class=”content”>文字内容</div>
</div>
CSS代码
b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
height:1px;
font-size:1px;
overflow:hidden;
display:block;
}
.b1,.b8{
margin:0 5px;
}
.b2,.b7{
margin:0 3px;
border-right:2px solid;
border-left:2px solid;
}
.b3,.b6{
margin:0 2px;
border-right:1px solid;
border-left:1px solid;
}
.b4,.b5{
margin:0 1px;
border-right:1px solid;
border-left:1px solid;
height:2px;
}

第三种:利用jQuery圆角插件代码实现圆角

优点:兼容所有版本的浏览器;
缺点:需要用jQuery插件,会拉是网页加载速度;
jQuery插件需要和jQuery文件一起使用,例如
$(“#chaomao”).corner(“5px”),这样就实现了id值的设置,chaomao的的圆角值为5px。

回复

我来回复
  • 暂无回复内容

联系我

平时工作忙:合作还是咨询SEO服务,请简明扼表明来意!谢谢!

在线咨询:点击这里给我发消息

邮件:dabingseo@qq.com
工作时间:周一至周六,10:30-24:30,节假日休息

个人微信
个人微信
分享本页
返回顶部