CSS3中关于圆角和阴影以及边框图片和盒子内减的详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3中关于圆角和阴影以及边框图片和盒子内减的详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2538字，纯文字阅读大概需要4分钟。

内容图文

圆角： border-radius
阴影： box-shadow
边框图片： border-image
盒子内减： box-sizing:border-box;

圆角：border-radius:像素/百分比

一个值设置的是盒子的四个角的水平和垂直半径 每个角都可以单独进行设置，取值顺序是左上 右上 右下 左下顺时针设置 可以简写，逻辑跟padding和margin一样 单位支持像素，和百分比（参照的是宽度和高度）

可以用 水平半径/垂直半径去单独控制半径，并且每一个半径都可以单独控制

p:nth-child(5){
    border-radius: 0px 200px;
}
p:nth-child(7){
    width: 400px;
    /* 如果中间有斜杠，控制的是水平方向和垂直方向的半径大小 */
    border-radius: 200px/100px;
}

胶囊的制作： 值为大于等于短边的一半即可，一半以上也不会有变化。

p {
        width: 200px;
        height: 100px;
        background-color: palevioletred;
        border-radius: 50px;
    }

阴影：box-shadow:值

值说明：

第一个值 ：Npx 阴影向水平方向偏移N个像素 第二个值 ：Npx 阴影向垂直方向偏移N个像素 第三个值 ：羽化大小 第四个值 ：阴影尺寸 第五个值 ：颜色（默认黑色） 第六个参数： 内外阴影（默认是外阴影，内阴影是inset） 阴影可以写多个，中间用逗号隔开

阴影可以简写，但是需要注意有一些值需要补0

p:nth-child(8):hover{
    /* 阴影可以写多个 */
    background-color: #000;
    box-shadow: 10px 10px 10px 2px red, 20px 20px 10px 4px green,30px 30px 2px 6px blue;
}

文字阴影

语法：text-shadow:水平偏移 垂直偏移 羽化大小 颜色

边框图片：border-image:值

遵从的是九宫格式切图，上下左右分别来一刀

值说明：

border-image-source:url(‘border.png’); 图片路径 border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀） border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）

简写：border-image:url(‘border.png’) 26 round;

盒子内减:box-sizing:border-box

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

vcq91q7SuzwvcD4NCjxwcmUgY2xhc3M9"brush:sql;"> /*bootstrap全局中设定该样式*/ *, *::before, *:after{ border-sizing:border-box; }

小例子：实现两列布局，中间始终保持有10px的间距

<style type="text/css">* {
    padding: 0;
    margin: 0;
}
.left {
    width: 50%;
    float: left;
    height: 300px;
    padding-right: 5px;
    box-sizing: border-box;
}
.right {
    width: 50%;
    float: left;
    height: 300px;
    padding-left: 5px;
    box-sizing: border-box;
}
.info {
    width: 100%;
    height: 100%;
    background-color: pink;

以上就是CSS3中关于圆角和阴影以及边框图片和盒子内减的详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS3中关于圆角和阴影以及边框图片和盒子内减的详解全部内容，希望文章能够帮你解决CSS3中关于圆角和阴影以及边框图片和盒子内减的详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---