分享程序员开发的那些事...
更新时间：2022-09-05 14:30:11
开发者学堂课程【CSS 快速掌握：圆角矩形】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9210
内容介绍
一、 Border-radius
二、 具体例子
Border-radius：左上 右上 右下 左下
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角矩形</title>
<style type="text/css">
div{
width: 100px;
height:100px ;
border:1px solid #f00 ;
}
/*使用结构伪类选择器来匹配元素*/
div :nth-child(1){
/*border-radius:左上 右上 右下 左下; */
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
< body>
<div></div>
如果说 border-radius 的四个值都是一样的话就可以只需要写一个参数就可以.
例1
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角矩形</title>
<style type="text/css">
div{
width: 100px;
height:100px ;
border:1px solid #f00 ;
}
/*使用结构伪类选择器来匹配元素*/
div :nth-child(1){
/*border-radius:左上 右上 右下 左下; */
border-radius: 10px 20px 30px 40px;
}
div:nth-child(2){
/*左上角 右上角 右下角 左下角这个四角的值都20px*/
border-radius: 20px;
}
div:nth-child(3){
/*只想让左上角与左下角有圆角*/
border-radius: 10px 0px 0px 10px;
div:nth-child(4){
/*只想让左上角与左下角有圆角*/
border-radius: 10px 10px 0px 0px;
}
div:nth-child(5){
/*想让这个div变成圆形*/
如何实现圆形：
第一步：当前元素的宽度与高度要是一样的
也就是这个元素是个正方形
第二部：就是使用border-radius这个属性
那么这个属性的值要等于宽高的一半
*/
border-radius:50px;
background-color:#ccc
div:nth-child(6){
width:100px;
height:40px;
border-radius: 20px;
/*要实现椭圆就要设置圆角矩形的值为高度的一半*/
div :nth-child(7){
/*实心的上半部分是圆形*/
height: 50px; /*高度要等于宽度的一半*/
width: 100px;
background-color: #9da;
/*在设置圆角矩形的时候只需要设置两个值左上角与右上角这两个角的值要等于高度*/
border-radius: 50px 50px 0px 0px;
</style>
</head>
< body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
例2
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.left{
Height:100px;
Width:50px;
Background-color:#9da;
/*左半圆*/
Border-radius:50px 0px 0px 50px;
}
div.right{
Height:100px;
Width:50px;
Background-color:#9da;
/*右半圆*/
Border-radius:0px 50px 50px 0px;
}
div.up{
Height:50px;
Width:100px;
Background-color:#9da;
/*上半圆*/
Border-radius:50px 50px 0px 0px;
}
div.bottom{
Height:50px;
Width:100px;
Background-color:#9da;
/*下半圆*/
Border-radius:0px 0px 50px 50px;
</style>
</head>
<body>
<div class=”left”></div>
<hr>
<div class=”right”></div>
<hr>
<div class=”up”></div>
<hr>
<div class=“bottom”></div>
</body>
</html>