CSS3新特性

最新推荐文章于 2024-07-12 16:31:27 发布

qq_25462315

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量112

点赞数

分类专栏： css3 文章标签： css3

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.计算长度calc（）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算长度calc（）</title>
    <style>
        body {
            background: #E8EADD;
            color: #3C323A;
            padding: 20px;
        }
        .wrapper {
           width: 90%;/*写给不支持calc()的浏览器*/
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
            margin: auto; //让div水平居中
            background-color: aquamarine;
        }
        #div1 {
            position: absolute;
            left: 50px;
            width: calc(100% - 100px);
            border: 1px solid black;
            background-color: yellow;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        123
    </div>
     <div id="div1">一些文本...</div>
</body>
</html>

一、选择器
定义：所谓伪对象选择符，不是真实存在的对象，可以用一个冒号，但为了区别于伪类选择器，所以我们建议用俩冒号
重点记一下伪对象选择符中的before和after
正常来说，你要在一个元素后面加个小竖线的话，如果竖线和边框高度一样还好可以用边框做，但是要是要求小竖线和文字一样高，那么就可以用：after来做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
            display:flex;
        }
        #ul1 li{
            width: 100px;
            height: 50px;
            background: #ffff00;
            line-height:50px;
            text-align:center;
            position: relative;
        }
        #ul1 li::after{
            content : "";
            background:#000;
            width: 1px;
            height: 20px;
            position: absolute;      /*因为伪类对象是行级元素，所以要设宽高的话就得先定位*/
            right: 0px;
            top: 15px;
        }
    </style>
</head>
<body>
<ul id="ul1">
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
</ul>
</body>
</html>

注：此外after还有一种作用，清除浮动

.clearfix::after{
   content:'',
   display:block;
   clear:both;
}

给元素清除浮动的方法

给父元素家overflow：hidden
给父元素设个固定的高
给子元素下面加个div，div设置样式为clear：left或both
给父元素加个class叫clearfix，然后运用after
.clearfix::after{
content:’’,
display:block;
clear:both;
}
二、文本，文字
1.text-shadow文本阴影

text-shadow: 10px -10px 0px rgba(255,0,0,0.6);
/*第一个参数是水平偏移量，正值就往右，负值就往左 
第二个参数是垂直偏移量，正值就往下，负值往上 
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰 
第四个参数，阴影颜色*/

2.text-overflow 超出文本显示省略号

  /*单行文本溢出，用省略号显示的语法*/
    p{
        width: 300px;
        height: 50px;
        border: 1px solid #ff0;
        overflow: hidden;/* 让超出边框的文本隐藏起来*/
        text-overflow: ellipsis;/* 让超出边框边缘的的文本显示成...*/
        white-space:nowrap;/*让多出边框的文本不换行，在同一行显示*/
    }

强制不换行

div{
white-space:nowrap;
}

自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词断行

div{
word-break:break-all;
}

三、颜色 rgba
用rgba的好处是当父元素设置透明的时候，子元素不会跟着一块变透明

div{
            background: #f00;
            opacity: 0.6;/* 如果这样设置透明度的话，div里面的子元素文字也会跟着透明*/
            filter: alpha(opacity = 60);
        }

如果用rgba设置透明度的话，子元素就不会跟着透明了

div{
            background: rgba(255,0,0,0.6);
        }

四、边框
1.圆角效果 border-radius: 5px; border-radius: 50%; 就变成圆了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五环</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .circle, .circle::after{
            width: 200px;
            height: 200px;
            border: 10px solid #000;
            border-radius: 50%;
            position: absolute;
        }
        .circle::after{
            content: "";
            top:-10px; /*因为是在每个圈里加子元素，所以子元素从边框下面加上，所以要往上窜个边框的距离*/
            left:-10px;
        }
        .blue{
            border-color: #0000ff;
            top: 0px;
            left: 0px;
        }
        .blue::after{
            border-color: #0000ff;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .black{
            border-color: #000000;
            top: 0px;
            left: 230px;
        }
        .black::after{
            border-color: #000000;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .red{
            border-color: #ff0000;
            top: 0px;
            left: 460px;
        }
        .red::after{
            border-color:  #ff0000;
            z-index: 1;
            border-bottom-color: transparent;
        }
        .yellow{
            border-color: #ffff00;
            top: 110px;
            left: 110px;
        }
        .yellow::after{
            border-color:#ffff00;
        }
        .green{
            border-color: #00ff00;
            top: 110px;
            left: 340px;
        }
        .green::after{
            border-color: #00ff00;
        }
    </style>
</head>
<body>
<div class="circle blue"></div>
<div class="circle black "></div>
<div class="circle  red" ></div>
<div class="circle  yellow"></div>
<div class="circle green"></div>
</body>
</html>

2.box-shadow 边框阴影，和文本阴影类似
第一个参数是水平偏移量，正值就往右，负值就往左
第二个参数是垂直偏移量，正值就往下，负值往上
第三个参数模糊程度，值越大，字越模糊，值为0 就是清晰
第四个参数外延值，值越大，就越往外延伸
第五个参数，阴影颜色

五、背景
1.background-origin背景原点
background-origin属性值有
border-box
padding-box
content-box
表示背景是从border、padding、content处开始的

2.background-size背景大小
默认俩参数，可以设置宽和高
属性值为cover的话呢，就是背景扩大到覆盖整个元素为止，可能会超出范围
属性值为contain的话呢，就是扩大到有一边挨着元素了为止，可能会有一块没覆盖上

3.background-clip背景裁切
属性值为border -box表示从border处裁切，保留border以内的
属性值为content-box 表示从content处裁切，保留content以内的

qq_25462315

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性

1.计算长度calc（）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算长度calc（）&lt;/title&gt; &lt;style&gt; body { backgroun
复制链接

扫一扫