html怎样设置图片的圆角矩形,css怎么画圆角矩形？

css怎么画圆角矩形？下面本篇文章就来给大家介绍一下使用css画圆角矩形的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在CSS中，可以通过圆角边框border-radius属性来画圆角矩形。border-radius属性允许为元素添加圆角边框效果。

圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦。

圆角边框border-radius属性的基本用法：

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法：border-radius: 1-4 length|% / 1-4 length|%;

属性值：length：定义圆角的形状。

%：以百分比定义圆角的形状。

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

圆角边框的最基本用法就是设置四个相同弧度的圆角boder-top-left-radius：30px； //左上角

boder-top-right-radius：30px； //右上角

boder-bottom-left-radius：30px； //右下角

boder-bottom-right-radius：30px； //左下角

如果这四个弧度的圆角相同，可以写成：border-radius：30px；

示例：画圆角矩形

div{

margin:0 auto;

background: pink;

width:200px;

height:200px;

border:2px solid darkslategray;

border-radius:30px;

text-align: center;

line-height: 200px;

}

圆角矩形

效果图：