html圆角矩形如何设置,CSS中设置元素的圆角矩形

圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形。

border-radius属性值一共有4个,左上、右上、右下、左下。

border-radius属性值规则如下:第一个值为左上、第二个值为右上、第三个值为右下、第四个值为左下。

假如border-radius属性值都是一致的我可以设置一个属性值即可。

圆角矩形实践圆角矩形基本使用方式

圆角矩形

198945519_1_20200811032123365.png如果我们的border-radius属性值一致实践。

圆角矩形

198945519_2_20200811032123708.png如果使用border-radius属性值将元素设置为圆形呢。

第一步:要设置的元素宽高度必须一致。

第二步:使用border-radius属性值必须是要设置的元素宽高度的一半。

圆角矩形

198945519_3_20200811032123990.png设置椭圆形实践

实现椭圆形border-radius属性值必须是元素的高度一半即可。

圆角矩形

198945519_4_20200811032124302.png

设置半圆形设置右半圆形border-radius属性值左上、和左下为元素的宽度一致即可。

圆角矩形

198945519_5_20200811032124615.png设置左半圆形border-radius属性值右上、和右下为元素的宽度一致即可。

圆角矩形

198945519_6_20200811032124911.png设置上半圆形border-radius属性值左上、和右上为元素的高度一致即可。

圆角矩形

198945519_7_20200811032125193.png设置下半圆形border-radius属性值左下、和右下为元素的高度一致即可。

圆角矩形

198945519_8_20200811032125474.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值