摘要:本篇文章探讨了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;
}
.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;
}
复制代码
页面部分
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
效果:
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知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号