Detaillierte Einführung in die Zusammenfassung gängiger CSS-Effekte

CSS hat viele häufig verwendete Effekte. Sie sehen sie vielleicht, wenn Sie auf der Website surfen, aber wenn Sie sie wirklich selbst schreiben möchten, vergesse ich sie manchmal plötzlich.

1. Bei größeren Katastrophen werden viele Websites grau. Wie kann man dafür sorgen, dass Websites schnell grau werden? Der CSS-Code ist sehr einfach und verwendet die Filterfunktion von CSS.

Der Code lautet wie folgt:

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);//谷歌浏览器}

Es gibt einige Websites, auf denen die Farbe der FLASH-Animation nicht durch CSS-Filter gesteuert werden kann. Sie kann zwischen den FLASH-Codes eingefügt werden:

<param value="false" name="menu"/><param value="opaque" name="wmode"/>

2. p ist editierbar, was bedeutet, dass ein p zu einem eingabefeldähnlichen Effekt wird.

Fügen Sie einfach das Attribut contentEditable="true" wie folgt zu p hinzu:

<p id="p1" contentEditable="true"  ></p>  
<p id="p2" contentEditable="true" ></p>  
<p contentEditable="true"  id="p3"></p>

3 Um Benutzer am Kopieren zu hindern, haben einige Websites die Funktion zum Verhindern der Auswahl eingerichtet von p. Legen Sie die folgenden Attribute fest:

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

Spezifischer Code:

sdfsdfswerwer324234234234

Auf diese Weise können die Dinge in p nicht kopiert werden!

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中文网视频教程！

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Zusammenfassung gängiger CSS-Effekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!