CSS3.0新增属性

时间 2019-11-08

标签 css3.0 css 新增属性栏目 CSS 繁體版

原文原文链接

背景图片设定
background 默认图片重复
css容许应用纯色做为背景，也容许使用背景图像建立至关复杂的效果
background-size规定背景图片的尺寸
background-size:cover 优先宽释放高度根据宽度释放
cover把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。
背景图像的某些部分也许没法显示在背景定位区域中。
contain把图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。css

颜色
十六进制色 background-color:#0000ff;
RGB颜色：rgb(255,0,0)
RGBA颜色：rgba(255,0,0,0.5)
HSL颜色： hsl(120,65%,75%)
HSLA颜色：hsla(120,65%,75%,0.3)html

RGBA颜色值获得如下浏览器的支持：IE9+,Firefox3+，Chrome,Safari以及Opera10+
RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道-它规定了对象的不透明度
RGBA颜色值是这样规定的：rgba(red green blue alpha)alpha参数是介于0.0（彻底透明）
与1.0（彻底不透明）的数字。web

不透明度
CSS建立透明图像(默认图像是不透明的)
注释：CSS opacity属性是W3C CSS推荐标准的一部分
filter:alpha(opacity=XX)是IE滤镜浏览器

.transparent_class{
filter:alpha(opacity=50);
-moz-opacity:0.5; /*浏览器的兼容*/
-khtml-opacity:0.5;/*浏览器的兼容*/
opacity:0.5;
}url

渐变(能够多个颜色之间变化)

渐变能够建立相似于彩虹的效果，低版本的浏览器不得不使开发者用图片来实现，CSS3将会
轻松实现网页渐变效果。
background:-webkit-linear-gradient(#fffff,#ffffff,#000000)/*线性渐变*/spa

个性边框
CSS3新增三个边框属性
Border-radius 圆角边框
Box-shadow 边框阴影
Border-image 图片边框
IE9+支持圆角和阴影htm

圆角边框 (变成一个圆形图像用来作头像)
div{ border:2px solid;
border-radius:25px
-moz-border-radius:25px;/*Old Firefox*/
-webkit-border-radius:25px;/*添加WEBKIT支持*/
border-top-left-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}对象

阴影
在CSS中，box-shadow用于向方框添加阴影
语法
box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow:0px 1px 3px rgba(0,0,0,0.35)图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3.0特性</title>
    <style>
        body
        {
            background: url("moto1.jpg");
           background-size: contain;
        }
        #bgc
        {   width: 200px;
            height: 200px;

            background-color: rgba(0,0,255,.5);/*1彻底不透明，0彻底透明*/

        }
        #op
        {
            width: 200px;
            height: 200px;
            background-color: green;
            opacity: 0.25;
        }
        #linear
        {
            width: 200px;
            height: 200px;
           background: -webkit-linear-gradient(green,gray,red);/*渐变色*/
        }
        #radius
        {
            width: 200px;
            height: 200px;
            border: 2px black solid;

            border-top-right-radius:2em ;
            border-top-left-radius:2em;
            border-bottom-right-radius:2em;
            border-bottom-left-radius:2em;
        }
        #imgrd
        {   /*设置一个圆形*/
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(#000000,#cccccc);/*渐变色*/
            border: 2px #222222 solid;
            border-radius: 150px;/*边框圆角*/
        }
       #shadow
       {
           width: 300px;
           height: 300px;
           background: goldenrod;
           box-shadow: 10px 20px 10px rgba(0,0,0,0.8) ;/*横 纵 阴影模糊的距离 阴影的颜色*/
       }
    </style>
</head>
<body>
<div id="bgc">背景色</div>
<div id="op">不透明度</div>
<div id="linear">渐变线</div>
<div id="radius">圆角边框</div>
<div><img src="moto3.jpg" id="imgrd"></div>/*制做一个圆形的图像*/
<div id="shadow">阴影</div>
</body>
</html>