设置圆
.radious{
实心上半圆
height: 50px;
width: 100px;
background-color: red;
border-radius: 50px 50px 0px 0px;*/
/*实心圆*/
height: 100px;
width: 100px;
background-color: red;
border-radius: 50px;
/*实心左半圆 添加阴影的设置*/
height: 100px;
width: 50px;
background-color: yellow;
border-radius: 50px 0px 0px 50px;
box-shadow: 0px 0px 10px red inset,4px 6px 10px green;
}
CSS3边框 为边框应用图片 border-image
如果给一个相框镶嵌上漂亮的画框就可以用这的方式设置
height: 210px;
width: 210px;
border: 70px solid;
background-color: aqua;
-webkit-border-image: url("/52e22a1c0001406e03040221.jpg")70 repeat;
-moz-border-image: url("/52e22a1c0001406e03040221.jpg")70 repeat;
-o-border-image: url("/52e22a1c0001406e03040221.jpg")70 repeat;
border-image: url("/52e22a1c0001406e03040221.jpg")70 repeat;
image.png
height: 210px;
width: 210px;
border: 80px solid;
background-color: aqua;
-webkit-border-image: url("/52e22a1c0001406e03040221.jpg")20 repeat;
-moz-border-image: url("/52e22a1c0001406e03040221.jpg")20 repeat;
-o-border-image: url("/52e22a1c0001406e03040221.jpg")20 repeat;
border-image: url("/52e22a1c0001406e03040221.jpg")20 repeat;
image.png
CSS3颜色 颜色之RGBA
background:rgba(5,100,120,0.5)
/*CSS3颜色 渐变色彩 */
width: 400px;
height: 400px;
//从左上角到右下角的渐变
background-image: linear-gradient(to bottom right,red,yellow,green,blue,black);
效果图
image.png
image.png
CSS3文字与字体 text-overflow 与 word-wrap
width: 100px;
height: 400px;
background-image: linear-gradient(to bottom right,red,yellow,green,blue,black);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
image.png
image.png
CSS3文字与字体 嵌入字体@font-face
@font-face {
font-family: "MOOC Font";
src: url("/Amaranth-BoldItalic.otf");
}
.demo {
width: 340px;
padding: 30px;
color: #566F89;
background: #000;
font-size:58px;
font-family: "MOOC Font";
}
image.png
CSS3文字与字体 文本阴影text-shadow
text-shadow: 2px 20px 10px blue; (水平位置，垂直位置，模糊程度 ，颜色)
image.png
设置元素背景图片的原始起始位置。
background-origin:content-box;
image.png
CSS3背景 background-clip(用来将背景图片做适当的裁剪以适应实际需要。)
image.png
