Home > Article > Web Front-end > Detailed introduction to the summary of common css effects
CSS has many commonly used effects. You may see them when you browse the website, but when you really want to write them yourself, you sometimes suddenly forget them. Today I will briefly summarize those common effects.
The code is as follows:
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);//谷歌浏览器}
The color of FLASH animation on some websites cannot be controlled by CSS filters. It can be inserted between the FLASH codes:
<param value="false" name="menu"/><param value="opaque" name="wmode"/>
Just add the contentEditable="true" attribute to p, as follows:
<p id="p1" contentEditable="true" ></p> <p id="p2" contentEditable="true" ></p> <p contentEditable="true" id="p3"></p>
unselectable="on" onselectstart="return false;"
Specific code:
sdfsdfswerwer324234234234
In this way, the content in p cannot be copied!
做form表单的时候,前面经常有姓名,年龄,公司名称等等,有的是2个字,有的是4个字,如何让字对齐呢?有的人的做法是打几个空格,但是这样不是很准确,最好的办法是如下:
css代码:
.test1 { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } }
html代码:
<p class="box1"> <p class="test1">姓 名</p> <p class="test1">姓 名 姓 名</p> <p class="test1">姓 名 名</p> <p class="test1">所 在 地</p> <p class="test1">工 作 单 位</p> </p>
如下图红色框框中的按钮
代码如下:
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
添加 x-webkit-speech 属性就可以了。
设置方法如下:
::-webkit-input-placeholder { /* WebKit browsers */ color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999;}
after选择器通常在clear中使用,用法如下:
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
写了这个clearfix,可以让外层p包裹整个内层,符合谷歌闭合机制。
也可以在某个元素前面或者后面追加,例如:
p:after{ content:"haorooms:-";background-color:yellow;color:red;font-weight:bold;}
每个p标签后面都加了一个 -haorooms
opacity: .9; filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的,在IE6中p透明的方法一般用filter;
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
一般要指定宽度,然后给如下四个属性。
display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
案例代码:
.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);box-shadow: 0 1px 1px rgba(0,0,0,.2);
自动换行
p{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
p{word-break:break-all;}
强制不换行
p{white-space:nowrap;}
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。早期版本的Safari和Chrome,支持-webkit-border-radius属性,早期版本的Firefox支持-moz-border-radius属性。 目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;border-radius: 15px;
(注意:border-radius必须放在最后声明,否则可能会失效。)
另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。
-moz-border-radius-topleft(标准语法:border-top-left-radius)-moz-border-radius-topright(标准语法:border-top-right-radius)-moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)-moz-border-radius-bottomright(标准语法:border-bottom-right-radius)
#haorooms ul { //父亲 display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; } #haorooms ul li{ //儿子设置 -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; float:none;}
关于css3弹性盒子模型之box-flex,我在博客中暂时没有写相关文章,因为这个属性不支持IE,所以我很少用到。
我一般用别的方法来代替这个属性。想达到弹性盒子的要求,jquery mobile 有一套网格布局法,很不错,支持IE的,有时间可以参考一下,或者研究一下他们是怎么写的,参照他们的方法可以自己改写一下!
关于弹性盒子式的布局,大家也可以看下bootstrap,bootstrap提出栅格类的一个说法,你引进他的css之后,可以用col-mid-*来进行布局。例如:
<p class="row"> <p class="col-md-6">.col-md-6</p> <p class="col-md-6">.col-md-6</p></p>
各站一半!
<p class="row"> <p class="col-md-8">.col-md-8</p> <p class="col-md-4">.col-md-4</p></p>
前面的是整个宽度的三分之二,后面是整个宽度的三分之一!
具体可以看看bootstrap的样式解释:http://v3.bootcss.com/css/
resize: none; //禁止拖动
以下是resize属性的的各个取值:
none:用户不能操纵机制调节元素的尺寸;both:用户可以调节元素的宽度和高度;horizontal:用户可以调节元素的宽度;vertical:让用户可以调节元素的高度;inherit:默认继承。
p垂直居中的方法,请参考php中文网视频教程!
The above is the detailed content of Detailed introduction to the summary of common css effects. For more information, please follow other related articles on the PHP Chinese website!