11-CSS3属性详解（一）

#前言

我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。

本文主要内容：

  • 文本

  • 盒模型中的 box-sizing 属性

  • 处理兼容性问题：私有前缀

  • 边框

  • 背景属性

  • 渐变

#文本

#text-shadow：设置文本的阴影

格式举例：

	text-shadow: 20px 27px 22px pink;
 

参数解释：水平位移 垂直位移 模糊程度 阴影颜色。

效果举例：

#举例：凹凸文字效果

text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body {

            background-color: #666;

        }

        div {

            font-size: 100px;

            text-align: center;

            font-weight: bold;

            font-family: "Microsoft Yahei";

            color: #666;

        }

        /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/

        .tu {

            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;

        }

        .ao {

            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

        }

    </style>

</head>

<body>

<div class="ao">生命壹号</div>

<div class="tu">生命壹号</div>

</body>

</html>
 

效果如下：

上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。

#盒模型中的 box-sizing 属性

我们在**之前的文章**中专门讲过盒子模型。

CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

这就需要用到 box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。

外加模式：（css的默认方式）

	box-sizing: content-box;
 

解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。

内减模式：【需要注意】

	box-sizing: border-box;
 

解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

#处理兼容性问题：私有前缀

通过网址http://caniuse.com/ 可以查询CSS3各特性的支持程度。

处理兼容性问题的常见方法：为属性添加私有前缀。

如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。

私有前缀的举例：

比如说，我想给指定的div设置下面这样一个属性：

	background: linear-gradient(left, green, yellow);
 

上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。

如果直接这样写属性，是看不到效果的：

此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。

格式如下：

    -webkit-: 谷歌 苹果

    -moz-:火狐

    -ms-：IE

    -o-：欧朋
 

格式举例如下：

    background: -webkit-linear-gradient(left, green, yellow);

    background: -moz-linear-gradient(left, green, yellow);

    background: -ms-linear-gradient(left, green, yellow);

    background: -o-linear-gradient(left, green, yellow);

    background: linear-gradient(left, green, yellow);
 

效果如下：

#边框

边框的属性很多，其中边框圆角和边框阴影这两个属性，应用十分广泛，兼容性也相对较好，且符合渐进增强的原则，需要重点熟悉。

#边框圆角：border-radius 属性

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。

单个属性的写法：

	border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径

	border-top-right-radius: 60px 120px;

	border-bottom-left-radius: 60px 120px;

	border-bottom-right-radius: 60px 120px;
 

复合写法：

	border-radius: 60px/120px;             //参数：水平半径/垂直半径

	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值

	border-radius: 20px 60px;
 

最简洁的写法：（四个角的半径都相同时）

	border-radius: 60px;
 

举例：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .parent {

            width: 400px;

        }

        .box {

            width: 100px;

            height: 100px;

            float: left;

            border: 1px solid rgb(144, 12, 63);

            margin: 20px;

            text-align: center;

            line-height: 100px;

            color: #fff;

            font-size: 50px;

            background-color: rgb(255, 141, 26);

        }

        /*画圆形的方式一*/

        .box:nth-child(1) {

            border-radius: 50px;

        }

        /*画圆形的方式二*/

        .box:nth-child(2) {

            border-radius: 50%;

        }

        .box:nth-child(3) {

            border-radius: 100px 0 0 0;

        }

        .box:nth-child(4) {

            border-radius: 100px/50px;

        }

        .box:nth-child(5) {

            border-radius: 10%;

        }

        .box:nth-child(6) {

            border-radius: 0 100px;

        }

    </style>

</head>

<body>

<div class="parent">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

    <div class="box">4</div>

    <div class="box">5</div>

    <div class="box">6</div>

</div>

</body>

</html>
 

效果如下：

#边框阴影：box-shadow 属性

格式举例：

	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色

	box-shadow: 15px 21px 48px -2px #666;
 

参数解释：

  • 水平偏移：正值向右 负值向左。

  • 垂直偏移：正值向下 负值向上。

  • 模糊程度：不能为负值。

效果如下：

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

	box-shadow:3px 3px 3px 3px #666 inset;
 

效果如下：

20180207_2028.png 

注意：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

我们还可以设置多重边框阴影，实现更好的效果，增强立体感。

#边框图片

边框图片有以下属性：

	/* 边框图片的路径*/

	border-image-source: url("images/border.png");

	/* 图片边框的裁剪*/

	border-image-slice: 27;

	/*图片边框的宽度*/

	border-image-width: 27px;

	/*边框图片的平铺*/

	/* repeat :正常平铺 但是可能会显示不完整*/

	/*round: 平铺 但是保证 图片完整*/

	/*stretch: 拉伸显示*/

	border-image-repeat: stretch;
 

我们也可以写成一个综合属性：

	 border-image: url("images/border.png") 27/20px round;
 

这个属性要好好理解，我们假设拿下面这张图来作为边框图片：

这张图片将会被“切割”成九宫格形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：

再具体一点：

#常见的边框图片汇总





CSS3的更多属性，且看下文继续。
												


											
css 11-CSS3属性详解（一）的更多相关文章
	

    
						
  1. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状  (转)
		
    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
    
		
    2. 
						
  2. Css盒模型属性详解（margin和padding）
		
    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
    
		
    3. 
						
  3. CSS中background属性详解
		
    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
    
		
    4. 
						
  4. CSS3属性详解（图文教程）
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
    
		
    5. 
						
  5. CSS3 Media Queries_media queries, css3属性详解
		
    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
    
		
    6. 
						
  6. css中border-sizing属性详解和应用
		
    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...
    
		
    7. 
						
  7. css动画-animation各个属性详解（转）
		
    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
    
		
    8. 
						
  8. css 12-CSS3属性详解：动画详解
		
    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
    
		
    9. 
						
  9. 【CSS3  transform属性和过渡属性详解】
		
    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
    
		
    10. 
				

	


随机推荐
	

    
									
  1. Golang 实现 Redis(6): 实现 pipeline 模式的 redis 客户端
			
    本文是使用 golang 实现 redis 系列的第六篇, 将介绍如何实现一个 Pipeline 模式的 Redis 客户端. 本文的完整代码在Github:Godis/redis/client 通常 ...
    
			
    2. 
						
  2. java中高级面试利器（boot,cloud,vue前后端提升）
			
    https://github.com/Snailclimb/JavaGuide   Java知识大全(面试) https://github.com/doocs/advanced-java  Java工 ...
    
			
    3. 
						
  3. Camtasia中对录制视频进行编辑——旁白
			
    相信很多人都遇见过想要录制视频,但是不知道在电脑上用哪一款软件比较好,害怕自己录的视频导出来之后会有水印,或者在录制的过程中遇到麻烦,更或者下载一款带有病毒的软件.那么今天我便给大家推荐一款专业录制屏 ...
    
			
    4. 
						
  4. FL Studio音乐编曲入门教程
			
    有很多小伙伴给我们留言说使用FL Studio20一段时间后,虽然对这款音乐编曲软件的功能有了一个了解,但对它整个的编曲过程还不是太熟悉.所以今天我就给大家带来了FL Studio20这款音乐编曲软件 ...
    
			
    5. 
						
  5. 【性能测试】【locust】快速入门
			
    简介 locust是一个开源的分布式用户负载压力测试工具,对网站(其他系统,例如接口等)进行负载测试,并确定可以处理多少的并发用户,locust特点利用了协程支持,达到高数量级别的并发,以及基于事件驱 ...
    
			
    6. 
						
  6. Redis 基础设计结构之三 hash（哈希）
			
    Redis 有 5 种基础数据结构,分别为:string (字符串).list (列表).set (集合).hash (哈希) 和 zset (有序集合). 今天来说一下hash(哈希),hash的数 ...
    
			
    7. 
						
  7. JZOJ8月10日提高组反思
			
    JZOJ8月10日提高组反思 T1 没想到怎么打 就去打暴力了 本来想拿个30不错了 结果\(AC\)了 话说回来,数据也挺小的 T2 不AC便爆0 就一个数据点 给不给打暴力的人活了 正解是状压DP ...
    
			
    8. 
						
  8. SAP调用RestfulApi接口POST数据到外部系统
			
    作者:明光烁亮 出处:http://www.cnblogs.com/hezhongxun/ 微信号:HEme922 欢迎加好友一起交流SAP! 视频资料共享. 本文版权归作者和博客园共有,欢迎转载,但 ...
    
			
    9. 
						
  9. day2(RESTful风格API)
			
    1.RESTful风格API  详情查看博客地址:https://www.cnblogs.com/xiaonq/p/10053234.html 1.1 什么是RESTful REST与技术无关,代表的 ...
    
			
    10. 
						
  10. 2017 Mid Central Regional F.Orderly Class(大水题)
			
    这两天刷了两道过去的原题,看看思维还是8太行. 这道题问给出两个字符串,要求只翻转一次,问有几种不同的方法使得a串变成b串 我一开始没看到只翻转一次,还以为是个计数 + 字符串dp大难题,心想当年的学 ...
    
			
    11.