CSS学习笔记（四）

最新推荐文章于 2021-12-08 20:05:19 发布

柚子～

最新推荐文章于 2021-12-08 20:05:19 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/weixin_45454695/article/details/102962609

版权

边框阴影效果

box-shadow:水平偏移垂直偏移阴影尺寸颜色

 box-shadow: 2px 0 5px rgba(0,0,0,.3);

三角形及不对称图形

可以利用边框本身的特性来做

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one{
            width: 0;
            height: 0;
            border-left:solid 8px transparent;
            border-bottom: solid 8px red;
            border-right:solid 8px transparent;
            margin: 20px;
        }
        .two{
            margin: 20px;
            width: 50px;
            height: 100px;
            border-width: 0 10px 10px 1px;
            border-color:transparent transparent black transparent;
            border-style: solid;
        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

效果如下：

动画过渡

 transition: all .3s linear;

溢出省略号

在规定长度内，将溢出的内容不换行，并且用…省略掉多余的内容

 	overflow: hidden;
    white-space: nowrap;/*禁止换行*/
    text-overflow: ellipsis;/*clip则是直接截断，无省略号代替多余部分*/

线性渐变

background:linear-gradient(deg,颜色1,颜色2,颜色3);
：：after或者：：before来表示在某个标签后或者前任意增添一些东西

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            margin: 10px 50px;
        }
        span::after{
            content:"world";
            background: yellowgreen;
            color:#fff;
            font-size: 18px;

        }
        div{
            margin: 50px;
            width:300px;
            height:200px;
            background:linear-gradient(270deg,navy,red,olivedrab);
        }
    </style>
</head>
<body>
<span>hello</span>
<br>
<br>
<br>
<div></div>
</body>
</html>

效果如下：
在这里插入图片描述

删除线

 text-decoration: line-through;

效果如下

在这里插入图片描述

同类标签中不包含最后一个

在我们平时书写相关代码时，会经常遇到相同标签有着共同的某些样式，

唯独最后一个不加这些样式
例如：
a:not(:last-of-type){
}
可用数学函数代替
例如：
ul>li:nth-of-type(5n){
}
其中n为自然数，5n可表示第五个，第十个，第十五个…

position中位置

例如：

子元素定位为absolute时，四周对齐可用 top:0; bottom:0; right:0; left:0;
以及固定定位（fixed）有时书写的位置可能随着电脑的分辨率不同而造成一些位置的偏移，可先根据屏幕的正中位置进而再调整
left:50%; margin-left: ;

柚子～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（四）

边框阴影效果box-shadow:水平偏移垂直偏移阴影尺寸颜色 box-shadow: 2px 0 5px rgba(0,0,0,.3);三角形及不对称图形可以利用边框本身的特性来做<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <...
复制链接

扫一扫