css3背景颜色样式,css3的关于背景的设置样式

设置圆

.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("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")70 repeat;

-moz-border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")70 repeat;

-o-border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")70 repeat;

border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")70 repeat;

image.png

height: 210px;

width: 210px;

border: 80px solid;

background-color: aqua;

-webkit-border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")20 repeat;

-moz-border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")20 repeat;

-o-border-image: url("http://img.mukewang.com/52e22a1c0001406e03040221.jpg")20 repeat;

border-image: url("http://img.mukewang.com/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("http://www.imooc.com/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