【8】CSS3新增属性

最新推荐文章于 2021-12-18 21:31:55 发布

qq_3526022

最新推荐文章于 2021-12-18 21:31:55 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css3 webkit

本文链接：https://blog.youkuaiyun.com/qq_35260622/article/details/51991407

CSS 专栏收录该内容

7 篇文章

订阅专栏

浏览器内核

所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都是要用到时再调入内存并执行的.
常见浏览器的内核，一般不外乎微软的IE 内核和webkit内核。

不同浏览器的内核

一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari 和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

根据不同的内核，一些私有属性的css前缀不一样

内核	前缀	浏览器
Gecko内核	css前缀为”-moz-“	火狐浏览器
Presto内核	css前缀为”-o-“	Opera(欧朋)
Trident内核	css前缀为”-ms-“	IE
WebKit内核	css前缀为“-webkit-	safari chrome

border-radius:圆角边框

语法：
border-radius：[ <length> | <percentage> ]
    默认值：0
    取值：
    <length>： 用长度值设置对象的圆角半径长度。不允许负值 
    <percentage>： 用百分比设置对象的圆角半径长度。不允许负值

box-sizing
语法：box-sizing: content-box|border-box

使用服务器端字体

Font-face:使用服务器端字体
@font-face{
     font-family:webfont;
     src:url(../font/jpzk.otf);
}
h1{
     font-family:webfont;
}

Text-shadow:文字添加阴影

text-shadow 文字阴影：X方向的偏移量 Y方向上的偏移量   模糊 | 颜色

h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。    
blur    可选。模糊的距离。   
color   可选。阴影的颜色。   
例如：
元素{
              text-shadow: 15px 15px 5px #000 
        }

Box-shadow:盒阴影

box-shadow(盒子阴影)：X方向的偏移量 Y方向上的偏移量   模糊|大小 | 颜色|内外阴影（x|y不能省略）

语法：box-shadow: h-shadow v-shadow blur spread color inset; 
说明：box-shadow 属性向框添加一个或多个阴影

以省略号形式显示

      text-overflow:ellipsis
      oveflow:hidden
      white-space:nowrap

text-overflow
语法：text-overflow: clip|ellipsis|string;
说明：属性规定当文本溢出包含元素时发生的事情

overflow
    overflow （文本溢出）: hidden/scroll/visible/auto      
                                             auto:超出加上滚动条 |
                                             hidden:溢出部分隐藏
                                              scroll:溢出不溢出都以滚动条显示|且横向纵向滚动条都出现。
                                                                                overflow-y:scroll只有纵向出现滚动条


语法：
overflow:hidden|scroll|auto|visible
说明：对于盒子中容纳不下的内容的显示方法
Overflow-x:
Overflow-y:

新增背景属性

Background-image:linear-gradient()：线性渐变
语法：
Background-image:linear-gradient(方向,颜色1,颜色2)
   radial-gradient(#f00,#ccc,#fff,#000);从圆心到圆周的渐变  



background-clip:指定对象的背景图像向外裁剪的区域(背景修剪)。
语法：
background-clip:border-box | padding-box | content-box 
说明：
默认值为border-box

padding-box:从padding区域开始向外裁剪背景。
border-box:从border区域开始向外裁剪背景
content-box:从content区域开始向外裁剪背景



background-origin：设置背景图像的起点位置。 
语法：
background-origin:border-box | padding-box | content-box
说明：
默认值为padding-box
border-box:以边框为原点开始计算 background-position
padding-box:以内补白为原点开始计算 background-position。
content-box:以内容盒子为原点开始计算 background-position


background-size   检索或设置对象的背景图像的尺寸大小 
语法：
   background-size: length|percentage|cover|contain;
说明：
默认值为 auto
length:用长度值指定背景图像大小。不允许负值。
precentage:用百分比指定背景图像大小。不允许负值。
 background-size:100px 100px;(调整图片到指定大小)
background-size:50% 20%;(调整图片到指定大小。百分比是相对于包含元素的尺寸的。)
auto:背景图像的真实大小
cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器(扩展图片来填满元素(保持像素的长宽比))
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内(缩小图片来适应元素的尺寸(保持像素的长宽比))




background:url(),url(),url();添加多个背景图，逗号隔开

CSS3 中，可以对一个元素应用一个或多个图片作为背景。

新增边框属性

Border-image    设置或检索对象的边框样式使用图像来填充
 border-image-source ： 设置或检索对象的边框是否用图像定义样式或图像来源路径。
 border-image-slice ： 设置或检索对象的边框背景图的分割方式。
 border-image-width ： 设置或检索对象的边框厚度。
 border-image-outset ： 设置或检索对象的边框背景图的扩展。
 border-image-repeat ： 设置或检索对象的边框图像的平铺方式。