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.

1. During major disasters, many websites turn gray. How to make websites turn gray quickly? The css code is very simple, using the filter function of css.

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"/>

2. p can Editing is to turn a p into an input box-like effect.

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>

3. In order to prevent users from copying, some websites have set the function of p to prohibit selection, and set the following attributes :

unselectable="on" onselectstart="return false;"

Specific code:

sdfsdfswerwer324234234234

In this way, the content in p cannot be copied!

4、CSS 中form表单两端对齐

做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>

5、input声音录入按钮，（紧支持谷歌）

如下图红色框框中的按钮

代码如下：

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词"  x-webkit-speech>

添加 x-webkit-speech 属性就可以了。

6、给input的placeholder设置颜色

设置方法如下：

::-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;}

7、css3实现一个p设置多张背景图片及background-image属性

8、CSS选中状态修改，谷歌滚动轴修改

9、css input[type=file] 样式美化，input上传按钮美化

10、CSS :after 和：before选择器

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

11、透明度

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);}

12、超出长度显示省略号

一般要指定宽度，然后给如下四个属性。

display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

案例代码：

.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

13、阴影效果

-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);

14、CSS强制换行和不换行

自动换行

p{ word-wrap: break-word; word-break: normal; }

强制英文单词断行

p{word-break:break-all;}

强制不换行

p{white-space:nowrap;}

15、CSS 圆角

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）

16、css浏览器兼容问题的一些总结（IE6等）

17、IE6 中png背景透明的最好方法及谈谈IE6和我的博客

18、css3弹性盒子

#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/

19、textarea禁止拖动

resize: none; //禁止拖动

以下是resize属性的的各个取值:

none：用户不能操纵机制调节元素的尺寸；both：用户可以调节元素的宽度和高度；horizontal：用户可以调节元素的宽度；vertical：让用户可以调节元素的高度；inherit：默认继承。

20、p垂直居中的方法总结

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!