CSS中设置元素的圆角矩形
2021-04-25 23:29
阅读：405
YPE html>
标签：alt image cal 宽高 name 椭圆 http htm 属性
圆角矩形介绍
- 在
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属性值左下、和右下为元素的高度一致即可。
圆角矩形
CSS中设置元素的圆角矩形
标签：alt image cal 宽高 name 椭圆 http htm 属性
原文地址：https://www.cnblogs.com/lq0001/p/12227252.html
下一篇：JS事件
评论
亲，登录后才可以留言！