圆角矩形介绍

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

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

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

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

圆角矩形实践

圆角矩形基本使用方式

圆角矩形

div{

width: 100px;

height: 100px;

border: 2px solid rebeccapurple;

border-radius: 10px 20px 30px 40px;

}

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

圆角矩形

div{

width: 100px;

height: 100px;

border: 2px solid rebeccapurple;

border-radius: 20px ;

}

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

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

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

圆角矩形

div{

width: 100px;

height: 100px;

border: 2px solid rebeccapurple;

border-radius: 50px ;

}

设置椭圆形实践

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

圆角矩形

div{

width: 100px;

height: 50px;

border: 2px solid rebeccapurple;

border-radius: 25px ;

}

设置半圆形

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

圆角矩形

div{

width: 50px;

height: 100px;

border: 2px solid rebeccapurple;

border-radius: 50px 0px 0px 50px ;

}

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

圆角矩形

div{

width: 50px;

height: 100px;

border: 2px solid rebeccapurple;

border-radius: 0px 50px 50px 0px ;

}

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

圆角矩形

div{

width: 100px;

height: 50px;

border: 2px solid rebeccapurple;

border-radius: 50px 50px 0px 0px ;

}

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

圆角矩形

div{

width: 100px;

height: 50px;

border: 2px solid rebeccapurple;

border-radius: 0px 0px 50px 50px ;

}

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[CSS中设置元素的圆角矩形]http://www.zyiz.net/tech/detail-99792.html