html中半圆怎么写,HTML5+CSS3从⼊门到精通之CSS3制作
半圆
本篇⽂章探讨了HTML5+CSS3从⼊门到精通之CSS3 制作半圆，希望阅读本篇⽂章以后⼤家有所收获，帮助⼤家对相关内容的理解更加深⼊。
<
1.利⽤css如何制作⼀个半圆？(思路：对样式border-radius以及宽⾼的控制)
复制代码
div{
display: inline-block;
border:1px solid #6baabb;
width:40px;
height:40px;
float:left;
margin:0px 10px;
}
a{
display: inline-block;
width:40px;
height:40px;
background: #6baabb;
}
.Round{/*圆*/
border-radius:20px;
}
.LeftRound{/*左半圆*/
width:20px;
border-radius:20px 0px 0px 20px;
}border radius什么意思
.RightRound{/*右半圆*/
width:20px;
border-radius:0px 20px 20px 0px;
}
.TopRound{/*上半圆*/
height:20px;
border-radius:20px 20px 0px 0px;
}
.BottomRound{/*下半圆*/
height:20px;
border-radius:0px 0px 20px 20px;
}
复制代码
页⾯部分
效果：
2.即当a标签内有内容时，⽆法再对a标签进⾏宽⾼的控制，但⼜不想引⼊图⽚作为背景，此时⽤css3渐变属性linear-gradient (思路：⼀个圆，将⾃⼰不需要显⽰的半圆⽤⽩⾊背景)
background:linear-gradient(to top, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*上半圆*/
background:linear-gradient(to bottom, #fff 0%, #fff 45% ,#6baabb 50%,#6baabb); /*下半圆*/
本⽂由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。