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