CSS3工作版

已于 2022-02-10 13:43:18 修改
阅读量310 收藏 1
点赞数
分类专栏： CSS 文章标签： CSS
于 2018-09-25 10:12:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34516556/article/details/82735460
版权

动画属性(适用于IE10及以上)

animation
name(none | name)
duration(时间 2s)
timing-function(时间曲线)
delay(延迟/快进 2s)
iteration-count(播放次数 2 | infinite)
direction(轮流播放 normal | alternate | reverse | alternate-reverse);
animation-fill-mode : none | forwards | backwards | both;(动画外状态)
animation-play-state: paused|running;(动画状态)
keyframes 可以只有to,可以没有100%和0%

时间曲线描述
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
@keyframes mymove{
	from {top: 0px;height: 0px;width: 0px;}
	to {top: 200px;height: 100px;width: 100px;}
}

/*第二种写法*/
@keyframes mymove{
	0% {top: 0px;height: 0px;width: 0px;}
	100% {top: 200px;height: 100px;width: 100px;}
}
@keyframes move
{
	50%
	{
		width:1000px;
	}
}
div{
	background: red;position: absolute;
	animation:mymove 5s ease 1s infinite alternate both;
}
/*暂停动画*/
div{
	animation-play-state:paused;
}

背景属性

background:
color(#000 | red | rgb(0,0,0) | transparent)
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
position(位置) /size(length | percentage | cover | contain)
repeat(repeat | repeat-x | repeat-y | no-repeat)
attachment(定位 scroll | fixed)
新属性IE9及以上
origin(相对点 padding-box | border-box | content-box)
clip(剪裁 border-box | padding-box | content-box)
size
background-blend-mode 属性定义了背景层的混合模式（图片与颜色）(ie不支持)。
在这里插入图片描述
filter(ie不支持)
ie滤镜(https://www.jb51.net/css/71829.html)

img {
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
   filter: grayscale(100%);
}

在这里插入图片描述
在这里插入图片描述

//多张背景图(ie9及以上)
background:url("haoroomsCSS1_s.jpg") 0 0/20px 20px no-repeat,
                     url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
                     url("haorooms.jpg") 400px 201px no-repeat;
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;

//渐变(ie10及以上)
 linear-gradient(45deg, yellow 10%, green 20%)

body{ 
	background: #00FF00 url(bgimage.gif) no-repeat fixed top/20px 20px content-box  border-box;
}

属性

边框属性

border:
width(thin | medium | thick | length)
style
color
属性

p{
	border:5px solid red;
}

//border-style:hidden

<style>
table{
    margin: 100px 100px;
    border: 1px none skyblue;
    border: 1px solid skyblue;
    border: 1px hidden skyblue;
    border-collapse: collapse;/*相邻边被合并*/
}
td{
    border: 1px solid pink;
    width: 100px;
    height: 100px;
}
</style>

<body>
    <table>
        <tr><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    </table>
</body>

在这里插入图片描述

outline:(IE8及以上)

color：同上
style：同上
width： thin | medium | thick | length

p{
	outline:#00FF00 dotted thick;
}

border-image:(IE11及以上)

source(url | none)
slice(裁剪偏移量 number | % | fill)分割图像的偏移量
width(number 倍数 | % | auto)四角图像区域的宽度
outset(超出量 length | number)边框样式的放大量 Opera 不支持
repeat(stretch | repeat | round)Opera 不支持

div
{
border-image:url(border.png) 30 30/0.5 0.5 round;
}

在这里插入图片描述

边框圆角(ie9及以上)

border-radius: 1-4 length|% / 1-4 length|%;

div{
	border-radius: 2em 1em 4em / 0.5em 3em;
}

虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，所有浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差异。比如，下面这段代码在不同的浏览器中，渲染结果就相差很大。

　　border-color: black;
　　border-style: solid dashed;
　　border-width: 1px 2px 3px;
　　border-top-color: red;
　　border-radius: 5%;

另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
因此，目前最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。

盒子阴影(ie9及以上)

boxShadow 属性把一个或多个下拉阴影添加到框上,接受逗号分隔的多个写法。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
-o- | -moz- | -webkit- | box-shadow: h-shadow v-shadow blur spread color inset;

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

Box 属性

overflow-x: visible | hidden | scroll | auto;
overflow-y: visible | hidden | scroll | auto;

div{
	overflow-x:hidden;
}

透明度

div{
	opacity:0.5;
	//ie8及以下
	filter:Alpha(opacity=50);
}

opacity: value|inherit;

尺寸

max-length/height/width/min-height/max-width/min-width: auto ; length(使用 px、cm 等单位定义高度) ; % ( 基于包含它的块级对象的百分比高度) | auto | none

弹性盒模型

新（兼容ie10 ie11以上）
-ms- | -webkit- | -moz- | flex
在这里插入图片描述
flex-grow: number
flex-shrink: number
flex-basis: number|auto

flex-flow: flex-direction flex-wrap
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
flex-direction: row|row-reverse|column|column-reverse
flex-wrap: nowrap|wrap|wrap-reverse
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

align-content
属性对齐主轴上的各项（水平）。容器内必须有多行的项目，该属性才能渲染出效果。
在这里插入图片描述
ie11以上兼容，支持webkit前缀

align-items
设置了flex容器的对齐方式。使用每个flex对象元素的 align-self 属性可重写 align-items 属性。
在这里插入图片描述
ie11以上兼容，支持webkit前缀

align-self
定义flex子项单独在侧轴（纵轴）方向上的对齐方式。可重写灵活容器的 align-items 属性。
在这里插入图片描述
ie11以上兼容，支持webkit前缀

justify-content
用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
使用 justify-content 属性对齐交叉轴上的各项（垂直）。
在这里插入图片描述
ie11以上兼容，支持webkit前缀

order
设置或检索弹性盒模型对象的子元素出现的順序。如果元素不是弹性盒对象的元素，则 order 属性不起作用。
order: number|initial|inherit;
ie11以上兼容，支持webkit前缀

旧版（ie10及以上）

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

在这里插入图片描述

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;

/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;

/* W3C */
display:box;
box-direction:reverse;
}

box-direction: normal | reverse（反向） | inherit;

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}

box-flex: 1;
box-flex属性指定box的子元素是否灵活或固定的大小。
随着box收缩和增长，元素是否灵活的收缩或增长。每当有额外的空间，在box里，元素灵活的扩大来填补这一空间。

.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}

box-ordinal-group: integer;
指定一个box的子元素的显示顺序。具有较低值的元素显示在那些具有较高的值的元素之前。同一组值的元素显示顺序取决于他们源顺序。

div 
{ 
width:350px; 
height:100px; 
border:1px solid black; 

/* Firefox */ 
display:-moz-box; 
-moz-box-orient:horizontal; 

/* Safari, Opera, and Chrome */ 
display:-webkit-box; 
-webkit-box-orient:horizontal; 

/* W3C */ 
display:box; 
box-orient:horizontal; 
}

box-orient
ie不支持
指定一个box子元素是否应按水平或垂直排列。
水平方向的box里的子元素是由左到右显示，垂直方向的box显示从上到下排列。然而，box-direction方向可由 box-ordinal-group属性改变这个顺序。
在这里插入图片描述

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。此属性指定横向框的水平位置，垂直位置的垂直框。
在这里插入图片描述

字体属性(可继承)


.font{
	font: italic small-caps bold 100px/60px arial, sans-serif;
}

font:
style(normal | italic | oblique(倾斜))
variant(normal | small-caps)
weight(normal | bold | bolder | lighter | 100-900)
size(xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | %)/line-height(normal | number(此数字会与当前的字体尺寸相乘来设置行间距) | length | %)
family(family-name,generic-family)
font-variant:small-caps | normal 小型大写字母
@font-face(自定义字体)

内容生成（ie8及以上）

1.插入纯文字
content : ”插入的文章”，或者 content:none 不插入内容

#html
<h1>这是h1</h1>
<h2>这是h2</h2>
 
#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

2.嵌入文字符号
可以使用content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote 用于添加开始的文字符号，close-quote 用于添加结束的文字符号。

#html
<h1>这是h1</h1>
<h2>这是h2</h2>
 <q>This is a <q>big</q> quote</q>
#css
q:lang(en)
  {
  quotes: '"' '"' "'" "'";（yes）
  }
h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;(ie9+)
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

3.插入图片(ie9+)

#html
<h3>这是h3</h3>
 
#css
h3::after{
    content:url("URL");
}

4.插入元素的属性值

#html
<a href="http:///www.ido321.com">这是链接</a>
 
#css
a:after{
    content:attr(href);
}

5.计数器
counter()
counter方法可以接收两个参数。第一个是计数器的名字，必填；第二个是计数器的样式，也就是list-style-type，其支持的关键字值，就是list-style-type支持的那些值，比如disc | circle | square之类等等。

content: counter(n)
content: counter(m, circle)

counters()
counters方法主要用于嵌套计数，可以接收三个参数。第一个是计数器的名字，必填；第二个是字符串，用于嵌套计数的分隔符，如1.1中的“.”；第三个参数是计数器的样式，与counter一样。其中，前两个参数为必填

content: counters(n, '-');

body
  {
  counter-reset:section;
  }

h1
  {
  counter-reset:subsection;
  }

h1:before
  {
  counter-increment:section;
  content:"Section " counter(section,upper-alpha) ". ";
  }

在这里插入图片描述
在这里插入图片描述

列表(可继承)

ul{
	list-style:square inside url('/i/arrow.gif');
}

list-style
list-style-type
list-style-position(inside | outside)
list-style-image（url | none）
在这里插入图片描述
list-style-type IE8及以下不支持属性值 “decimal-leading-zero”、“lower-greek”、“lower-latin”、“upper-latin”、“armenian”、“georgian” 或 “inherit”。

边距

margin/padding :auto | length | %

定位属性

bottom:auto | length | %
clear:left | right | both | none
clip: rect(top,right,bottom,left) | auto
cursor:
cursor
display:
Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。
在这里插入图片描述
float:left | right | none
overflow: hidden | scroll | auto | visible
position:absolute | relation | fixed(ie9及以上) | static
vertical-align:
在这里插入图片描述
visibility:hidden | visible | collapse(在表格中删除一行或一列,给其他内容使用，ie8及以上)
z-index: auto | number

表格属性

border-collapse:separate(边框分离) | collapse（yes）
border-spacing:length(水平) length(垂直)（ie8及以上，yes）
caption-side:top | bottom（ie8及以上，yes）
empty-cells: hide | show（ie8及以上，yes）
table-layout:automatic | fixed（no）

2D/3D转换

坐标轴：x向下为正方向，y向右为正方向
transform

div{
	transform:rotate(7deg);
}

在这里插入图片描述
在这里插入图片描述
transform-origin: x-axis(left | right | center | length | %) y-axis(left | right | center | length | %) z-axis(length)

div{
	transform: rotate(45deg);
	transform-origin:20% 40%;
}

transform-style: flat|preserve-3d;
如何在 3D 空间中呈现被嵌套的元素。

div{
	transform: rotateY(60deg);
	transform-style: preserve-3d;
}

perspective: number|none
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
-moz-perspective: 500; /* Safari 和 Chrome */
}

perspective-origin: x-axis（left | right | center | length | %） y-axis（left | right | center | length | %）
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;    /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%;    /* Safari 和 Chrome */
-moz-perspective-origin: 10% 10%; 
}

backface-visibility: visible|hidden

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden;    /* Firefox */
-ms-backface-visibility:hidden;     /* Internet Explorer */
}

过渡属性（ie10及以上）

transition: property(属性名:none | all | property,property)
duration(时间 2s)
timing-function(速度曲线 )
在这里插入图片描述
delay(延迟 2s);
在这里插入图片描述

div{
	width:100px;
	transition: width 2s,height 1s;
}

用户界面属性

box-sizing:border-box | content-box;（ie8及以上）

div{
	box-sizing:border-box;
}

outline-offset: length（ie不支持）
resize: none|both|horizontal|vertical;（Firefox 4+、Safari 以及 Chrome 支持 resize 属性）
关键字:

initial :将属性设置为默认值,ie不支持,但是可能并不会按预期工作,比如display默认值为inline,及使其元素是块级元素
inherit  ie8+
auto
 all (初始化,ie和opera不支持)
 currentColor(color的支持)
 tranparent
 div {
    background-color: yellow;
    color: red;
    all: initial;
}

all: initial（修改所有元素属性或父元素的值为其初始化值）| inherit（修改所有元素属性或父元素的值为其父元素值）| unset（ 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值）;

文本属性（yes）

color:red | #fff | rgba(0,0,255,1);实际上是设置元素的前景色,扩展到边框颜色
direction: rtl | ltr
letter-spacing: normal | length
line-height:number | normal | length | %
text-align: left | right | center | justify
text-decoration:overline | line-through | underline | none（no）
text-indent： length | %
text-transform：uppercase（仅有大写字母） | lowercase（仅有小写字母） | capitalize（大写字母开头） | none
white-space: normal | pre(保留空白换行) | nowrap(不换行) | pre-wrap(保留空白换行)（ie8及以上） | pre-line(合并空白，保留换行)（ie8及以上）
word-spacing:normal | length(可负值)(中文无效)
text-overflow: clip(无) | ellipsis(省略号) | string(自定义);（no）
text-shadow: h-shadow(水平阴影的位置,允许负值) v-shadow(垂直阴影的位置,允许负值) blur (模糊的距离) color;（ie10及以上）
该属性是逗号分隔的阴影列表
word-break: normal | break-all(允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);
word-wrap: normal | break-word;
tab-size（可继承）(规定制表符（tab）字符的空格长度，ie和safair不支持)

多列布局（ie10及以上）

column-count: number|auto;

div{
	column-count:3;
}

column-gap: length|normal;(列间距)

div{
	column-gap:40px;
}

column-rule: column-rule-width column-rule-style column-rule-color;(列间线)
column-rule-width: thin|medium|thick|length;

div{
	column-rule:3px outset #ff00ff;
}

在这里插入图片描述

column-span: 1|all;（火狐不支持）

h2{
	column-span:all;
}

column-width: auto|length;

div{
	column-width:100px;
}

columns: column-width || column-count;

div{
	columns:100px 3;
}

选择器与media

@media(ie9及以上)
@media all | screen | print | speech and (max | min | -aspect-ratio 宽高比 | device-aspect-ratio 屏幕可见宽高 | device-height 屏幕可见高度 | device-width | height | width | orientation = portrait || landscape 页面可见区域高度是否大于或等于宽度 | resolution(分辨率，ie9+，safari及chrome支持))

@media screen and (max-width: 300px) {
   body {
      background-color:lightblue;
   }
}
@media mediatype and|not|only (media feature) {
   CSS-Code;
}`
或
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

选择器
ie9+
ie10+
ie不支持
只有Opera支持checked

墨竹摇曳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3弹性布局怎么兼容IE（11）？
highboys的博客
12-01 9772
弹性布局（Flexbox）确实为我们构建复杂、灵活的布局带来了很大的便利，但是它的兼容性确让人很头痛，下面是我遇到的一个问题： 理想效果： IE11效果： html大概结构： 这里大致说一下css，input-container宽高没设死，由input决定，并设置position: relative;相对定位，并采用display: flex;弹性布局
css3支持IE11,html - Css3 animation doesn't work in IE11 - Stack Overflow
weixin_28974337的博客
08-04 230
.box {width: 100px;height: 100px;}.box div {background-color: blue;width: 50px;height: 100px;float: left;}.rotateDoorsLeft {animation: rotateDoorsLeft .75s infinite ease 0s alternate;-webkit-animation...
html不支持css3,ie不支持css3吗？
weixin_39915605的博客
06-15 211
css指的是层叠样式表(Cascading Style Sheets)，它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体...
如何让ie支持css3和html5,css3 ie支持吗？
weixin_36165152的博客
06-15 308
CSS3 带来众多全新的设计体验，但有一个问题值得考虑：浏览器对 CSS3 特性的兼容情况如何？因为页面最终离不开用浏览器来渲染，并不是所有浏览器都完全支持 CSS3 的特性。那么ie支持css3吗？ie是支持css3的。但具体支持多少，这个需要看是哪些样式和什么版本的IE了：IE8以下，几乎不兼容CSS3，而IE8只支持非常小的一部分，比如box-sizing:border-box；IE9以及以...
css3 transform 旋转
sixteen_cicle的博客
09-27 283
比如：transform:translateX(-50%) translateY(-50%); 教程：http://www.runoob.com/cssref/css3-pr-transform.html
1.07 css3新特性
最新发布
10-07
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。CSS3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。 CSS3属性...
CSS3简洁版左右翻页电子书效果
06-12
CSS3的某些高级功能在较旧或者非主流的浏览器中可能无法正常工作。例如，翻页效果可能依赖于CSS3的3D转换、过渡（transition）和动画（animation）等特性，这些在Internet Explorer 9及以下版本中通常不被支持。为了...
CSS3 Succinctly
09-09
《CSS3 Succinctly》是Peter Shaw所著的一本关于CSS3技术的指南书籍。...通过阅读《CSS3 Succinctly》，读者能够系统地掌握CSS3的先进特性，并在实际工作中更好地运用CSS3来提升网页的设计和开发质量。
CSS和CSS3思维导图（xmind版）
01-03
 一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。 css3和css，在编写code的时候，...
让ie也支持css3
05-30
自己起一个公用类名，然后用behavior引入，哪个容器需要用到css3的样式就在这个容器上加上这个class类名
ie11图片点击变灰色css,css3 让图片变成灰色(filter)，但针对IE11浏览器无效
weixin_34770855的博客
08-03 1446
想要设置网站图片默认为灰色，鼠标经过时显示为彩色在网上找了很多方法， 修改css后，在非IE浏览器内都可以正常显示为灰色，但在IE11浏览器内一直为彩色查看好多教程，说是IE6-9都可以，但更高版本就不行了，有什么好办法没有代码如下:{-webkit-filter: grayscale(1);-moz-filter: grayscale(1);filter: grayscale(1);-ms-fi...
史上最全的CSS hack方式一览
923723914
09-28 2080
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己...
ie11——css兼容问题
一个昵称叫铃风的小前端
10-29 1231
1.flex的align-items: center无效 // 父元素（即设置display: flex的元素）添加伪元素 &:after{ content:''; min-height:inherit; font-size:0; } 2.unset无效 // 用none代替，如background：unset，谷歌都支持 3.hack // * 或 # ，IE7、IE11...
css样式适配IE11
lzm150的博客
06-22 9923
今天测试提了个显示BUG，在IE11上有问题。 这里不可能改动原有样式的，毕竟不能为了IE11放弃其他浏览器。查资料找到一个识别IE11的meta方法，那么问题就解决了，只要给IE11无法处理的样式下为他专门配置一个适配样式就可以了。 示例: .progressContainer { vertical-align: middle; display: inline-block; widt
CSS样式中IE11浏览器的兼容问题
热门推荐
qq_34057374的博客
01-24 1万+
所谓人在江湖漂，哪能不挨刀，虽然博主不喜欢前端，但身为.net，还是免不了和前端方面打交道，样式方面同样避免不了。 遇到不兼容的问题，进百度 css hack JS方面 加上下面这些注释代码后， 只让IE11浏览器支持，而别的浏览器访问不到    &lt;!--[if lt IE 11]&gt;     &lt;script type="text/javascript" src="http...
IE11不兼容css3渐变属性
ProgramarQin的博客
01-23 8431
最近做项目发现IE9兼容css3中渐变属性，到了IE11居然反而不兼容，一开始一直用低版本的IE测试兼容性，才发现低版本IE兼容的IE11不一定兼容，后来解决方法是，在样式最前面加入background设置不渐变的颜色，这样一来当渐变样式不出现，也可以有个初始的背景颜色，不至于按钮背景为白色且字体为白色时候按钮看不见，下面粘贴样式代码： background:#88D8F6; backgr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值