美文网首页
css3的关于背景的设置样式

css3的关于背景的设置样式

作者: 晨曦诗雨 | 来源:发表于2018-12-18 21:47 被阅读0次

设置圆

.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

相关文章

  • css3的关于背景的设置样式

    设置圆 CSS3边框 为边框应用图片 border-image 如果给一个相框镶嵌上漂亮的画框就可以用这的方式设置...

  • 透明度设置与兼容

    如何实现背景透明,文字不透明,兼容所有浏览器? 在实际中设置样式的透明度一共有3种方法 css3的opacity:...

  • UITextField相关属性设置和代理方法

    设置边框样式,只有设置了才会显示边框样式 //设置输入框的背景颜色,此时设置为白色 如果使用了自定义的背景图片边框...

  • css-背景

    关于背景色可以使用background-color在css样式里设置背景的颜色;1.背景色 要想背景色从元素中的文...

  • CSS-背景5-多张背景图

    1、多张背景图 CSS3可以选择多张背景图,每张背景图都可以独立设置尺寸、定位。下面我们使用CSS3的多张背景图,...

  • 微信小程序scroll-view隐藏滚动条

    将下面代码添加到 wxss文件中去: 更多关于滚动条的设置参看:CSS3自定义滚动条样式 -webkit-scro...

  • 背景设置

    背景介绍 设置背景样式:backgrou-color: #bfa;设置背景图片;使用background-imag...

  • 背景

    设置背景样式:backgrou-color: #bfa;设置背景图片;使用background-image来设置背...

  • 背景

    设置背景样式:backgrou-color: #bfa;设置背景图片;使用background-image来设置背...

  • IOS TextField设置大全

    //初始化textfield并设置位置及大小 //设置边框样式,只有设置了才会显示边框样式 //设置输入框的背景颜...

网友评论

      本文标题:css3的关于背景的设置样式

      本文链接:https://www.haomeiwen.com/subject/dplhkqtx.html