欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-25 22:02:45
...
圆角: border-radius
阴影: box-shadow
边框图片: border-image
盒子内减: box-sizing:border-box;

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

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

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

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 )
此属性表现为怪异模式下的盒模型。

CSS3中关于圆角和阴影以及边框图片和盒子内减的详解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中关于圆角和阴影以及边框图片和盒子内减的详解的详细内容,更多请关注其它相关文章!