什么是CSS #
CSS(Cas CAD ing Style Sheets的缩写)， 翻译 为[层叠样式表]或[级联样式表]，简称样式表。
CSS的主要作用#
它主要是用来给HT ML 网页来设置 外观 或样式。外观或样式：HTML网页中的文字的大小、颜色、字体，网页的 背景颜色 、背景图片。
CSS3 边框
CSS3 边框#
通过 CSS3，您能够创建 圆 角边框，向矩形添加阴影，使用图片来 绘制 边框 - 并且不需使用设计软件，比如 PhotoShop。
您将学到以下边框属性：border-radius、box -s hadow、border -i mage。
一、圆角边框border-radius#
在 CSS3 中，border-radius 属性用于创建圆角：
1.1、border-radius语法#
基本写法如下：
设置左上角
border -t op-left-radius:10px;
设置右上角
border-top-right-radius:10px;
设置左下角
border-bottom-left-radius:10px;
设置左下角
border-bottom-right-radius:10px;
简写设置四个角
执行顺序如下: 左上-右上-右下-左下
border-radius:1px 2px 3px 4px;
设置四角值 统一
border-radius:10px;
支持百分比
border-radius:100%;
支持em
border-radius:2em;
支持 运算
border-radius:30px/30px; /*支持加和除 其余的不支持*/
JavaScript语法
document. getelementsbytagname ("div")[0].style.borderRadius = "25px";
1.2浏览器兼容性#
- webkit ：代表Webk IT 枘核浏览器，如ch rom e and safari私有属性或内核识别码。
-webkit-border-radius:5px; -moz：代表Firefox浏览器私有属性或内核识别码。
-moz-border-radius:5px;
ms代表ie浏览器私有属性或内核识别码。
-ms-border-radius: 5px;
-o-代表欧朋 opera 浏览器私有属性或内核识别码。
-o-border-radius: 5px;
IE9+、Firefox 4+、C hr ome、Safari 5+以及 O PE ra支持 border-radius 属性。
border-radius:10px;
总结
以上所述是小编给大家介绍的CSS3 边框效果， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你 觉得 本文对你有帮助，欢迎 转载 ，烦请注明出处，谢谢！
总结
以上是 为你收集整理的 CSS3 边框效果 全部内容，希望文章能够帮你解决 CSS3 边框效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。