css3圆角属性

来源：互联网发布：mac 中断 ping 编辑：程序博客网时间：2024/05/19 02:39

2 CSS3圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

一、减少网站维护量

二、提高网站性能少了图片HTTp请求网页加载速度变快

三、增加视觉美观性

CSS3 圆角属性

属性

描述

border-radius

所有四个边角 border-*-*-radius 属性的缩写

border-top-left-radius

定义了左上角的弧度

border-top-right-radius

定义了右上角的弧度

border-bottom-right-radius

定义了右下角的弧度

border-bottom-left-radius

定义了左下角的弧度

border-radius变宽的半径，指定一个值，就能同时设置四个边默认为0 但不可以为负数

#div1{
    width: 200px;
    height: 50px;
    border: 2px solid pink;
    border-radius: 25px;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style>
 #rcorners1{
 width: 200px;
 height: 50px;
 background: #8AC007;
 border: 2px solid palegreen;
 border-radius: 25px;
 text-align: center;
 }
 #rcorners4 {
 border-radius: 15px 50px 30px 5px;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 #rcorners5 {
 border-radius: 15px 50px 30px;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 #rcorners6 {
 border-radius: 15px 50px;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 #rcorners7 {
 border-radius: 50px/15px;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 #rcorners8 {
 border-radius: 15px/50px;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 #rcorners9 {
 border-radius: 50%;
 background: #8AC007;
 padding: 20px;
 width: 200px;
 height: 150px;
 }
 </style>
</head>
<body>
四个角相同
椭圆边框 - border-radius: 50px/15px:
椭圆边框 - border-radius: 15px/50px:
椭圆边框 - border-radius: 50%:
四个值 - border-radius: 15px 50px 30px 5px:
三个值 - border-radius: 15px 50px 30px:
两个值 - border-radius: 15px 50px:
</body>
</html>

注意：属性的两个长度第一个是水平半径，第二个是垂直半径，如果第二值省略，它从第二个复制，

阅读全文

0 0