css中怎么让背景为圆形

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,你可以使用以下两种方法将背景变成圆形:/* 方法一:使用border-radius属性 */ background-color: #FCA5A5; border-radius: 50%;

在CSS中,你可以使用以下两种方法将背景变成圆形:

/* 方法一:使用border-radius属性 */
background-color: #FCA5A5;
border-radius: 50%; /* 将元素的四个角变成圆角,值为50%时为圆形 */

/* 方法二:使用CSS伪元素&::before或&::after */
background-color: #A5FCA5;
position: relative; /* 设置相对定位 */
overflow: hidden; /* 隐藏超出元素尺寸的内容 */
&::before { /* 在元素内部插入内容 */
    content: '; /* 清空内容 */
    display: block; /* 转化为块级元素 */
    height: 100%; /* 继承元素的高度 */
    width: 100%; /* 继承元素的宽度 */
    position: absolute; /* 以元素为基准,绝对定位 */
    top: 0; /* 距离元素顶部0 */
    left: 0; /* 距离元素左侧0 */
    background-color: #A5A5FC;
    border-radius: 50%; /* 将元素的四个角变成圆角,值为50%时为圆形 */
} 

使用以上两种方法中的一种,你可以在你的CSS样式中添加代码,使背景呈现圆形。同时,你可以自己根据需要更改颜色、大小以及其他属性。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么让背景为圆形

粉丝

0

关注

0

收藏

0

已有0次打赏