css---盒模型新增样式

最新推荐文章于 2024-09-03 23:03:56 发布

distantimg

最新推荐文章于 2024-09-03 23:03:56 发布

阅读量77

点赞数

文章标签： css html js css3 javascript

本文链接：https://blog.csdn.net/u012138854/article/details/109590820

版权

box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值：
inset
默认阴影在边框外。
使用inset后，阴影在边框内。
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。
<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
如果两者都是0，那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。
不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
<color>
阴影颜色，如果没有指定，则由浏览器决定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                background: pink;
                text-align: center;
                line-height: 100px;
                
                
                box-shadow: -10px -10px 10px 0px black , 20px 20px 10px -10px deeppink;
            }
        </style>
    </head>
    <body>
        <div id="test">test</div>
    </body>
</html>

View Code

-webkit-box-reflect 设置元素的倒影

默认值:none 不可继承
值：(必须是123的顺序)
倒影的方向
第一个值，above, below, right, left
倒影的距离
第二个值，长度单位
渐变
第三个值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            img{
                vertical-align: middle;
                -webkit-box-reflect:left 10px;
            }
        </style>
    </head>
    <body>
        <img src="img/" width="200" height="200"/>
    </body>
</html>

View Code

resize CSS 属性允许你控制一个元素的可调整大小性。
(一定要配合overflow：auto使用)
默认值：none 不可继承
值：
none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
            div{
                display: inline-block;
                width: 200px;
                height: 200px;
                background: pink;
                vertical-align: middle;
                resize :horizontal;
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <div></div>
    </bod

View Code

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
默认值：content-box 不可继承
值
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括边框(border)，内边距(padding)，外边距(margin)。注意: 内边距, 边框 & 外边距都在这个盒子的外部。比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：
width = 内容的宽度，
height = 内容的高度。
宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 200px;
                padding: 50px;
                background: pink;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

View Code

distantimg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css---盒模型新增样式

box-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。默认值: none 不可继承值： inset 默认阴影在边框外。使用inset后，阴影在边框内。 &l...
复制链接

扫一扫