记录一些不常用，但效果不错的css属性

最新推荐文章于 2023-09-22 14:06:39 发布

小白路过

最新推荐文章于 2023-09-22 14:06:39 发布

阅读量209

点赞数

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/Bekind2010/article/details/128917504

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

`column-count`瀑布流

column-count定义列数，可以只通过设置css来实现瀑布流的效果，整体效果看起来还不错。兼容性也还可以，在没有特殊要求的瀑布流渲染中，可以考虑该属性。

img {
    width: 100%;
}

.img-container {
    column-count: 4;
    column-gap: 5px;
}

<div class="img-container">
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202203/bpic25713_s.jpg"/>
    <img src="https://scpic.chinaz.net/files/default/imgs/2022-12-16/81af7fa62391ff1f.jpg"/>
    <img src="https://scpic.chinaz.net/files/default/imgs/2022-12-14/36e3a661c37c15e5.jpg"/>
    <img src="https://scpic.chinaz.net/files/default/imgs/2022-09-28/bb85056b328a24fb.jpg"/>
    <img src="https://scpic.chinaz.net/files/default/imgs/2022-09-26/616580248c806310.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202203/bpic25713_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202203/bpic25724_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202203/bpic25757_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202203/apic39932_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202204/hpic5341_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202205/bpic26112_s.jpg"/>
    <img src="https://scpic.chinaz.net/Files/pic/pic9/202205/apic40827_s.jpg"/>
</div>

在这里插入图片描述

`clip-path`图片裁剪

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

`polygon`多边形

polygon函数是CSS中的内置函数，与filter属性一起使用以创建图像或文本的多边形
参数：polygon( percentage | length); 可接收多个参数，值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为(0,0),右下角为(100, 100)
使用：clip-path:polygon(0% 0%, 100% 50%, 0% 100%); 可以裁剪出三角形区域

代码示意：

<style>
        .img {
            width: 150px;
            float: left;
            margin-right: 10px;
            clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
        }
</style>
<div>
        <img class="img"
             src="../../img/player/poster_03.png" />
        The basic-shape data type is defined with one of the basic shape functions listed below.

        When creating a shape, the reference box is defined by each property that uses basic-shape values. The
        coordinate system for the shape has its origin at the top-left corner of the reference box, with the
        x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages
        are resolved from the used dimensions of the reference box.

        The default reference box is the margin-box, as demonstrated in the below image which shows a circle
        created using shape-outside: circle(50%). The shape is being defined with reference to the margin box.
    </div>

效果图：
在这里插入图片描述
可以根据图形，自行设置输入参数，这些点连接成的封闭区域，即为绘制的多变图。例如菱形 clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
在上面的示意图中，可以看到，虽然绘制了三角形的图形区域，但是整个img还是占据了矩形区域。如果希望外边距也是按照绘制的三角形去渲染，可以配合使用shape-outside属性
设置如下css属性，可以得到以下效果

clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);

在这里插入图片描述
在上面的示意图中，文字环绕图片，图片所占区域为绘制的三角形。

`circle`圆形

circle()参数值为一个坐标点和半径组成。左上角为原点，右下角是(100%,100%)的点。定义半径的时候可以用at关键字来定义坐标。

clip-path: circle(50%);
shape-outside: circle(50%);

在这里插入图片描述

`ellipse`椭圆

ellipse()参数值为x轴半径，y轴半径以及圆心坐标做成。

clip-path: ellipse(50% 30% at 50% 40%);
shape-outside: ellipse(50% 30% at 50% 40%);

在这里插入图片描述

`inset`

inset()参数值(上右下左 round 左上角radius 右上角radius 右下角radius 左下角radius)，round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。例如inset(25% 0% 25% 0% round 0% 25% 0% 25%)

clip-path: inset(22% 12% round 0 15px 0 35px);
shape-outside: inset(22% 12% round 0 15px 0 35px);

在这里插入图片描述
参考学习文章：CSS中clip-path属性的使用详解

`border-image`

1、可以用于实现渐变的border效果

.strape {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-image: linear-gradient(to right,red, green) 20 / 8px;
}

<div class="strape"></div>

在这里插入图片描述
2、裁剪图片作为border

.borderr{
    padding: 10px;
    width: 100px;
    border-style: solid;
    border-image-source: url(https://book.itheima.net/uploads/course/html5/images/5.3.3/image-20200623131346703.png) ;
    border-width: 20px;
    border-image-slice: 33%;
    /* border-image-repeat: repeat; */
}

<div class="borderr">测试边框</div>

在这里插入图片描述
用于作为边框背景的图片

`background-clip`背景裁剪

属性text

background-clip:text 以文字的范围来裁剪背景图片;可以实现多变的字体色彩。

效果

最终的文字效果
在这里插入图片描述

设置的背景图片
在这里插入图片描述

代码实现

HTML代码

<div class="container">
    <div class="box fl">测试背景</div>
    <div class="box fr">456</div>
</div>

css代码

.container {
    width: 500px;
    border: 1px solid red;
}

.box {
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F25%2F20200425173132_svsej.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673679769&t=a63a34a62f736142c5aaa4ff6b83378e) no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 100% 100%;
    width: 200px;
    height: 100px;
    font-size: 48px;
    color: transparent;
    border: 1px solid red;
}

.fl {
    float: left;
}
.fr {
    float: right;
}