CSS 02 border-radius
CSS 02 border-radius
卢衍飞
发布于 2023-02-13 13:33:20
发布于 2023-02-13 13:33:20
代码可运行
运行总次数：0
代码可运行
html:
css:
.demo{
width:200px;
heigth:200px;
border:1px solid #ccc;
background-color:#f66;
margin:50px auto;
border-radius:50%; // border-radius: 50% 50% 50% 50%;}
画一个半圆 .demo{
width:200px;
heigth:200px;
border:1px solid #ccc;
background-color:#f66;
margin:50px auto;
border-radius:100px 0 0 100px;} 画三角形和对话框案例 html
css
.sanjiao{
border-top:50px solid #ccc;
border-top:50px solid #f00;
border-top:50px solid #0f0;
border-top:50px solid #00f;
border:50px solid #ccc;
width:0px;
heigth:0;
margin:50px auto;} CSS 02 border-radius插图
.sanjiao{
border-left:50px solid #ccc;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid transparent;
border:50px solid #ccc;
width:0px;
heigth:0;
margin:50px auto;} CSS 02 border-radius插图1
做一个对话框：
hello word
.dialog{
background-color: #6a6;
margin:50px auto;
width:300px;
heigth:25px;
line-heigth:25px;
padding:10px;
boder-radius:6px;
color:#fff; }
.dialog::before{
content:'';
border-left:0px solid #6a6;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid #6a6;
position:absolute; //绝对定位
left:-10px;
top:14px;} 画菱形和平行四边形
.diamond{
background-color: #6a6;
margin:50px auto;
width:300px;
heigth:25px;
transform:rotate(45deg);}
.parallel{
background-color: #6a6;
margin:50px auto;
width:300px;
heigth:25px;
transform:skew(20edg;0); x轴倾斜，y轴倾斜，可以只X轴或者只y轴倾斜} 画五角星、六角星
>
>
start{
width:0;
height:0;
border-bottom:70px solid red;
border-left:100px solid transparent;
order-right:100px solid transparent;
margin:150px auto;
transfrom: rotoute(35deg);
position:relative;}
start::before{
content:'';
width:0;
height:0;
border-bottom:80px solid red;
border-left:30px solid transparent;
order-right:30px solid transparent;
margin:150px auto;
transfrom: rotoute(-35deg);
position:absolute;
top:-45px;
left:-65px;}
start::after{
content:'';
border-bottom:70px solid red;
border-left:100px solid transparent;
order-right:100px solid transparent;
margin:150px auto;
position:absolute;
transfrom: rotoute(-70deg);
top:3px;
left:-105px;}
start2{
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
order-right:50px solid transparent;
margin:100px auto;
position:relative;}
start2::after{
content:'';
width:0;
height:0;
border-top:100px solid red;
border-left:50px solid transparent;
order-right:50px solid transparent;
margin:100px auto;
position:absolute;
top:30px;
left:-50px;} 画五边形和六边形
//画一个梯形
//画一个五边形 一个三角形+一个梯形
//画一个六边形 一个长方形+2个三角形
zheng{
width:50px;
height:50px;
border-top:100px solid red;
border-left:50px solid green;
order-right:50px solid blue;
order-bottom:50px solid yellow;}
wubian{
width:54px;
height:0;
border-top:50px solid red;
border-left:18px solid transparent;
order-right:18px solid transparent;
margin:100px auto;
position:relative;}
wubian::after{
content:'';
width:0;
height:0;
border-bottom:35px solid red;
border-left:45px solid transparent;
order-right:45px solid transparent;
position:absolute;
top:-85px;
left:-18px}
six{
margin:100px auto;
width:100px;
height:55px;
background-color:red;
position:relative;}
six::before{
content:'';
width:0;
height:0;
border-bottom:25px solid red;
border-left:50px solid transparent;
order-right:50px solid transparent;
position:absolute;
top:-25px;
left:-18px}
six::after{
content:'';
width:0;
height:0;
border-top:25px solid red;
border-left:50px solid transparent;
order-right:50px solid transparent;
position:absolute;
top:55px;
left:-18px} 画心形和蛋形 画心
heart{
width:100px;
height:90px;
position:relative;
margin:100px auto;
background-color:#FF0;}
heart::before{
content:'';
position:absolute;
width:50px;
height:80px;
background-color:red;
border-radius:50px 40px 0 0;
transform-origin:0 100%; /* 设置旋转原点，定位*/
teansform:rotate(-45deg);
left:50px;}
heart::before{
content:'';
position:absolute;
width:50px;
height:80px;
background-color:red;
border-radius:50px 40px 0 0;
transform-origin:100% 100%; /* 设置旋转原点，定位*/
teansform:rotate(45deg); } 画蛋形：
egg{
width:126px;
height:180px;
background-color:#FA3;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;} 画太极阴阳图
body{
background-color:#ccc;}
taiji{
width:150px;
height:300px;
margin:100px;
border-radius:50%;
background-color:white;
border-left:150px solid black;}
taiji::before{
content:'';
position:absolute;
width:0px;
height:0px;
padding:25px;
border-radius:50%;
border:50px solid black;
background-color:white;
left:-75px;
top:0;}
taiji::after{
content:'';
position:absolute;
width:0px;
height:0px;
padding:25px;
border-radius:50%;
border:50px solid white;
background-color:black;
left:-75px;
bottom:0px;} CSS3制作透明背景层 （背景半透明、圆角、阴影）
background{
margin:100px auto;
width:800px;
height:291px;
background-imge:url(./back_img.jpg)}
content{
position:absolute;
width:400px;
height:200px;
background-color: #fff;
opacity: 0.8; /*透明度 只用在背景设置上，色块用rgba设置的更多*/
top:45px;
left:200px;
border-radius:10px;
padding:10px;
text-aligin:center;
box-shadow:3px 3px 5px #888;} CSS3的颜色模式 rgba(R,G,B,A) 其中的A是透明度 hsla(H,S,L,A) 少用 仿天猫商品展示
<div class="goods_title">新品九阳不用手洗破壁机静音料理全自动</div>
<div class="price">3599.0</div>
</li>
<li>
<div class="img">
<img src="./goods.jpg" alt="新品九阳不用手洗破壁机静音料理全自动">
</div>
<div class="goods_title">新品九阳不用手洗破壁机静音料理全自动</div>
<div class="price">3599.0</div>
</li>
</ul>
</div>body {
background: #ddd}
.main {
width: 900px;
height: auto;
margin: 90px auto;}
.main ul {
clear: both;}
.main li {
list-style: none;
float: left;
margin-right: 10px;
width: 240px;
padding: 1px;
border: 1px solid rgba(255, 0, 0, 0);
background: #fff}
.main li:hover {
border: 1px solid rgba(255, 0, 0, 1);}
.img img {
width: 240px;
transition: all .6s; /*过渡 */}
.main li:hover img{
opacity: .7; /*半透明程度 */}
.goods_title {
font-size: 14px;
color: #666;
line-height: 18px;
margin: 10px;
height: 35px;
overflow: hidden;}
.price {
font-size: 18px;
color: #ff0036;}
.price::before {
content: '￥'}
最后修改：2023 年 01 月 10 日
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
45个值得收藏的 CSS 形状
更多 >
腾讯云开发者
