CSS3 边框
CSS3 边框
通过 CSS3
,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop
。
您将学到以下边框属性:
border-radius
、box-shadow
、border-image
。
一、圆角边框border-radius
在 CSS3
中,border-radius
属性用于创建圆角:
1.1、border-radius语法
基本写法如下:
- 设置左上角
border-top-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
:代表Webkit
枘核浏览器,如chrome 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+
、Chrome
、Safari 5+
以及opera
支持border-radius
属性。
border-radius:10px;
相关推荐
momode 2020-09-11
云端漂移 2020-07-06
MaureenChen 2020-02-17
bertzhang 2020-01-31
impress 2020-01-11
MaureenChen 2020-01-10
impress 2019-12-31
zhanghao 2019-12-20
zengni 2019-12-18
zhanghao 2019-12-12
didianmanong 2019-11-17
impress 2019-11-05
echoes 2019-11-03
zhangruiweb 2019-11-01
绿豆饼 2019-10-20
Phoebe的学习天地 2015-11-12
王景迁 2019-09-07
懵懂听风雨 2018-09-27