你知道怎么利用css实现内凹圆角么


本文摘自PHP中文网,作者V,侵删。

本文利用径向渐变来实现背景透明的内凹圆角。

(视频教程推荐:css视频教程)

基本线性渐变

1

2

3

4

5

6

7

div {

    height: 100px;

    width: 200px;

    background-image: linear-gradient(90deg, red, blue);

}

 

<div>从左到右的红到蓝渐变</div>

加百分比调整渐变范围

1

2

3

4

5

6

7

div {

    height: 100px;

    width: 200px;

    background-image: linear-gradient(90deg, red 20%, blue 80%);

}

 

<div></div>

浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块

1

2

3

4

5

6

7

div {

    height: 100px;

    width: 200px;

    background-image: linear-gradient(90deg, red 50%, blue 50%);

}

 

<div></div>

颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了

1

2

3

4

5

6

7

div {

   height: 100px;

   width: 200px;

   background-image: linear-gradient(90deg, transparent 50%, blue 50%);

}

 

<div></div>

同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent

1

2

3

4

5

6

7

8

/* 径向渐变主体 */

.raidal {

    height: 100px;

    width: 100px;

    background:radial-gradient(transparent 50%,blue 50%);

}

 

<div class='raidal'></div>

径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。

应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果

1

2

3

4

5

6

7

8

/* 径向渐变主体 */

.raidal1 {

    height: 100px;

    width: 100px;

    background:radial-gradient(200px at left top,transparent 50%,blue 50%);

}

 

<div class='raidal1'></div>

同理四个方向, 调整圆心位置即可

阅读剩余部分

相关阅读 >>

css内边框线怎么设置

img元素可以用css

如何利用css改变浏览器滚动条样式

css中怎么给按钮添加背景图片(详解及实例)

css的span是什么意思

在线演示一个全屏切换效果实例

vue框架是什么

css中border是什么意思

css如何添加滚动条

css如何设置背景透明

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...