CSS 02 border-radius
2023-03-07 09:11:03 时间
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 日
相关文章
- 快速开启云中渲染之路
- 使用AWS KMS对存储在自定义Amazon S3存储桶内的输出结果进行加密,并通过Amazon Textract实现多页文档处理
- Modern Apps Live – 在 5 月了解无服务器、容器等
- 使用全新的 AWS WAF Bot Control 减少您网站上不需要的流量
- 如何开始使用适用于 Amazon VPC 的 Amazon Route 53 Resolver DNS 防火墙
- CloudWatch Metric Streams – 实时将 AWS 指标发送给合作伙伴和您的应用程序
- 排查新版 EC2 串行控制台的启动和联网问题
- PYTHON-FUNCTOOLS模块
- Red Hat OpenShift Service on AWS 现已正式推出
- 数据分析的技术源流
- AWS PrivateLink for Amazon S3 现已全面上线
- 成本分配博文之二:Amazon 生成与用户定义的成本分配标签
- 用 Microsoft ADFS 4.0 AWS 做 AppStream 2.0 单点登录部署
- 成本分配博文系列之一:您需要了解的成本分配基础知识
- 使用Microsoft AppLocker应用程序允许列表管理在Amazon AppStream 2.0上的应用程序
- 如何将开源项目迁移到 SageMaker
- 通过 EventBridge+SNS+Lambda 实时捕获EMR集群的状态变化
- 基于 Comprehend 的玩家评论分析解决方案
- Amazon Elastic File System 新增低成本单区存储类
- 采用 Amazon Transcribe 服务快速为大型线上会议视频添加字幕