一些特殊css

时间：2024-12-09 20:37:56

属性 描述          
 outline 

（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline:#00FF00 dotted thick;

可以按顺序设置如下属性：

  • outline-color
  • outline-style
  • outline-width
          
 text-size-adjust 

iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.(不建议用none)

          
 outline-offset 
outline-offset: length|inherit;

outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。

轮廓在两方面与边框不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形
          
 zoom  兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：
触发IE浏览器的haslayout
解决ie下的浮动，margin重叠等一些问题		          
 background-clip

属性规定背景的绘制区域。
background-clip: border-box|padding-box|content-box;

  9+        
 background-size  规定背景图像的尺寸 
background-size: length|percentage|cover|contain;
  9+  4+    5+  
 background-origin

属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

background-origin: padding-box|border-box|content-box;
 9+   4+    5+  
 -ms-interpolation-mode  iE7.0中自带的-ms-interpolation-mode属性可以解决缩放失真问题 bicubic  7  -  -  -  - 
appearance
  允许您使元素看上去像标准的用户界面元素 
appearance: normal|icon|window|button|menu|field;
     -moz  -webkit  -webkit  
  text-shadow

向文本设置阴影

text-shadow: h-shadow v-shadow blur color;
  9+        
 box-shadow

向框添加一个或多个阴影

box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
  9+         
page-break-inside

只有 Opera 浏览器支持 page-break-inside 属性。 避免在元素内部插入分页符

page-break-inside:avoid;
          
 text-rendering

CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡。

auto:
当绘制文本时，浏览器会进行智能识别，何时应该从速度、清晰度和几何精度方 面进行优化
optimizeSpeed：
当绘制文本时，浏览器会着重渲染速度，而不是清晰度和几何精度。该属性值不 能用于字距调整和连字。Gecko默认开启该属性，Firefox 是默认20px以下开启该属性。
optimizeLegibility：
当绘制文本时，浏览器会侧重文本的可读性（清晰度），而不是渲染速度和几何 精度。该属性值可以用于字距调整和连字。
geometricPrecision：
当绘制文本时，浏览器会着重几何精度，而不是清晰度和渲染速度。字体的某些 方面，比如字间距并不是按照线性比例进行渲染的，因此该属性可以使得设置为 这些字体的文本看起来很整洁。

  -        
  white-space

属性设置如何处理元素内的空白

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

          
 text-transform

控制文本的大小写。

这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

          
 transition 

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition: property duration timing-function delay;
  10+      -webkit  
 transition-timing-function

属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

  10+      -webkit  
 transition-property

属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

  10+      -webkit  
transition-duration  属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。                            
 -webkit-margin-collapse
这个属性属于限制级的，但是它还是非常值得关注。通常，两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。
最常见的例子就是两个相邻的<p>元素会共享他们的margin值。想要控制这个表现，我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse，值separate则停止共享margin值，也就是说，第一个元素的底部边距和第二个元素的头部边距会正常叠加
          
 linear-gradient  <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。
说明：
用线性渐变创建图像。
如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。
用默认的渐变方向绘制一个最简单的线性渐变

  10+    9.0+  5.0+  
 filter

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

Attribute Property Description
enabled Enabled Sets or retrieves a value that indicates whether the filter is enabled.
             EndColor Sets or retrieves the final opaque color for a gradient surface.
　　　　EndColorStr Sets or retrieves the final color for a gradient surface.
　　　　GradientType Sets or retrieves the orientation of the gradient.
　　　　StartColor Sets or retrieves the initial opaque color for a gradient surface.
startColorStr StartColorStr Sets or retrieves the initial color for a gradient surface.

https://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx

  6-9        
 -webkit-gradient
  • 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),…] );
  • -webkit-gradient是background的一个属性值；
  • webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear；
  • 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
    • 当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
    • 当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
    • 当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
    • 当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；
  • 实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%）,y1和y2可以最简单的取值是top（或0%）或bottom（或100%）；
  • from(开始颜色值),to(结束颜色值)是两个渐变颜色值；
  • [color-stop(偏移量<小数>,停靠颜色值),…]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；
      4.0-9.0  4.0-5.0  
 box-sizing            
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             
             

相关文章