CSS如何实现边框圆角-木庄网络博客

2022-03-02 16:13:40 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

CSS实现边框圆角需要用到CSS中的border-radius属性，下面我们就来看看CSS实现圆角边框的详细内容。

我们下来看一个没有圆角的边框实现代码

1	`<div style="border:solid 4px #808080;">这是一个框架</div>`

效果如下：

360截图20181116115656155.jpg

接下来我们就来具体看看使用CSS中border-radius属性实现圆角边框的代码

先来看看border-radius属性的语法格式：

1	`brder-radius:（左上水平半径）（右上水平半径）（右下水平半径）（左下水平半径）/（左上垂直半径）（右上垂直半径）（右下垂直半径）（左下垂直半径）;`

如果/被省略，则假设在水平方向和垂直方向上具有相同的半径。

1	`brder-radius:(左上半径）（右上半径）（右下半径）（左下半径）;`

代码示例1：

1 2	`<div style="height:75px;` `padding-top:25px;` `border:solid` `4px` `#808080;` `border-radius:` `25px` `25px` `25px` `25px` `/` `25px` `25px` `25px` `25px;">这是一个圆角边框</div>`