900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html圆角矩形如何设置 CSS中设置元素的圆角矩形

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

时间:2022-03-30 19:52:52

相关推荐

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

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

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

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

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

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

圆角矩形

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

圆角矩形

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

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

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

圆角矩形

设置椭圆形实践

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

圆角矩形

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

圆角矩形

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

圆角矩形

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

圆角矩形

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

圆角矩形

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。