组团学
学习方向
登录/注册

CSS3新特性-CSS3核心属性

阅读 (382)

一、文本属性

1、颜色半透明

  • 说明

    文字颜色半透明

  • 语法

    {   
 /*color: rgba(r,g,b,a)  a 是alpha 透明的意思  取值范围 0~1之间*/
  color: rgba(14, 28, 231,0.3)  
}

2、文字阴影

  • 说明

    可以文字添加阴影效果了 Shadow 影子

  • 语法

    {text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;}

    ![1498467502625](CSS3 新特性.assets/1498467502625.png)

    前两项是必须写的。 后两项可以选写。

    span{
    text-shadow:3px 4px 5px rgba(0,0,0,0.5);
}
<span>文本透明</span>

  • 凹凸文字

    
<style>
    body {
        background-color: #ccc;
    }
    div {
        color: #ccc;
        font: 700 80px "微软雅黑";
    }
    div:first-child {
        /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
    }
    div:last-child {
        /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
  }

</style>


<div>我是凸起的文字</div>
<div>我是凹下的文字</div>

1498467533412.png

二、盒子属性

1、盒子阴影

{box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；}

1498467567011.png

  • 注意

    1. 前两个属性是必须写的。其余的可以省略。
    2. 外阴影 (outset) 但是不能写，默认就是外阴影，想要添加内阴影 ，只有最后加上inset

  • 示例

    div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

2、圆角边框

  • 说明

    从此以后，我们的视野里就不只有矩形，还有圆角。

  • 语法格式：

    {border-radius: 左上角  右上角  右下角  左下角;}

  • 举例

<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		div:first-child {  /* 结构伪类选择器 选亲兄弟 */
			border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
		}

		div:nth-child(2) {
			/*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
			border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
		}

		div:nth-child(3) {
			border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
		}
		
		div:nth-child(4) {
			border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
		}
		div:nth-child(5) {
			border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
		}
		div:nth-child(6) {
			border-radius: 100px;  
			height: 100px; 
		}
		div:nth-child(7) {
			border-radius: 100px 0;  
		}	
        </style>

三、背景属性

1、背景透明

  • 说明

    CSS3支持背景半透明的写法语法格式是:

    {background: rgba(0,0,0,0.3);}

    最后一个参数是alpha 透明度 取值范围 0~1之间

  • 注意

    背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

2、背景缩放

  • 说明

    在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

  • 语法

div{
    width: 500px;
    height: 300px;
    background: rgba(255,0,0,0.3);
    background-image: url('1.gif');
    background-repeat: no-repeat;
    /* background-size: 10%; */            
    /* background-size: contain; */
    background-size: cover;
}

<div>背景透明</div>
<img src='1.gif' />

参数设置：

  1. 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
  2. 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，有溢出部分则会被隐藏。平时用的cover 最多。
  3. 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

3、多背景设置

  • 说明

    CSS3不但允许我们设置背景图片的尺寸，还可以设置多背景。以逗号分隔，可用于自适应布局。

    background-image:url(1.gif),url(2.jpg);
	/*水平起始位置，垂直起始位置 / 背景图宽  背景图高  背景颜色*/
background:url(1.gif) no-repeat scroll 10px 20px/50px 60px  ,
	   url(2.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

  • 注意

    1. 如果设置的多重背景图存在着重叠关系，前面的背景图会覆盖在后面的背景图之上。

    2. 为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

4、背景渐变

​ CSS3 渐变（gradient）可以在两个或多个指定的颜色之间显示平稳的过渡。 以前，我们必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

4.1 线性渐变语法

  • 说明

    在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

    background: linear-gradient(direction, color-stop1, color-stop2, ...);

    direction：默认为to bottom，即从上向下的渐变；

    stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

  • 示例1：to left、top right、to bottom、to top

    /*分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变*/
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */
div { background:linear-gradient(to top, red , blue) }

linear_1.png

  • 示例2：to right bottom、top right top、top left bottom、top left top

    /*分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变*/
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }

linear_2.png

  • 示例3：使用角度渐变

    角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

    div { background: linear-gradient(10deg, red, blue) }

linear_3.png

4.2 径向渐变

  • 说明

    径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

  • 语法

    background: radial-gradient(center, shape, size, start-color, ..., last-color);

  • 参数

    center：渐变起点的位置，可以为百分比，默认是图形的正中心。
    shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
    size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

  • 语法

    div { background: radial-gradient(red, green, blue); }

  • 示例1：多颜色点均匀分布

     div { 
     background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); 
} 
div { 
    background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); 
}

    以中心（50% 50%）为起点，到最远角（farthest-corner），从red到green、blue的均匀渐变

Image 3.png

  • 示例2：多颜色节点不均匀分布

    div { background: radial-gradient(red 5%, green 15%, blue 60%); }

Image 4.png

  • 示例3：设置渐变形状

    div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }

    circle：渐变为最大的圆形； ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

    Image 5.png

  • 示例4：不同尺寸的渐变

    size指定了渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

    div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

Image 6.png

4.3 重复性线性渐变

  • 语法

    div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

    10%的位置为yellow，20%的位置为green，然后按照这20%向下重复

    Image 7.png

4.4 重复性径向渐变

  • 语法

    div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

Image 8.png

四、浏览器前缀

  • 说明

    由于CSS3很多属性尚未成为W3C标准的一部分，因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上浏览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3属性。

    浏览器前缀 浏览器
    -webkit- Chrome, Safari, Android Browser
    -moz- Firefox
    -o- Opera
    -ms- IE, Edge

  • 提倡写法

    -webkit-border-radius:10px;  /*兼容chrome和Safari*/
-moz-border-radius:10px;     /*兼容Firefox*/
-ms-border-radius:10px;      /*兼容IE*/
-o-border-radius:10px;       /*兼容opera*/
border-radius:10px;
需要 登录 才可以提问哦
头像
：
回复