border-radius、transitions制作同心圆、三角形
**one：**同心圆：建一个正方形盒子，如此设置50%圆角时按照原盒子的长宽不至于成椭圆。用border-radius设置圆角为50%（这样才能形成正圆），设置边框粗细，小于盒子宽度则能形成同心圆。 **tow：**三角形：建一个长宽为0的盒子，设置边框的宽度和颜色，边框形成三角形
<head>
<meta charset="UTF-8">
<title>同心圆、三角形</title>
<style type="text/css">
.one{
width: 100px;
height: 100px;
border-radius: 50%;
border: solid aqua 50px;
}
.two{
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red yellow green blue;
position: relative;
left: 300px;
bottom: 190px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
内江师范学院过渡：将transition设置在初始状态，那么鼠标移入移出皆为设置过渡样式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: deepskyblue;
}
本文介绍了如何使用CSS的border-radius属性创建同心圆，以及利用边框宽度和颜色制作三角形。同时，讲解了transition在元素状态过渡中的应用，以及创建圆角矩形和8个三角形的方法。
最低0.47元/天 解锁文章
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
