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: '￥'}
