일반적인 CSS 효과 요약에 대한 자세한 소개

CSS에는 일반적으로 사용되는 효과가 많이 있습니다. 웹사이트를 탐색할 때 이러한 효과를 볼 수 있지만 실제로 직접 작성하고 싶을 때 갑자기 잊어버리는 경우가 있습니다. 오늘은 이러한 일반적인 효과를 간략하게 요약하겠습니다.

1. 대규모 재해가 발생하면 많은 웹사이트가 회색으로 변하게 됩니다. CSS 코드는 CSS의 필터 기능을 사용하여 매우 간단합니다.

코드는 다음과 같습니다:

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

일부 웹사이트의 FLASH 애니메이션 색상은 CSS 필터로 제어할 수 없습니다.

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

FLASH 코드 사이에 삽입할 수 있습니다. 2. p can 편집은 p를 입력 상자와 같은 효과로 바꾸는 것입니다.

다음과 같이 p에 contentEditable="true" 속성을 추가하세요.

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

3. 사용자가 복사하는 것을 방지하기 위해 일부 웹사이트에서는 p의 기능을 선택 금지로 설정했습니다. 그리고 다음 속성을 설정하세요:

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

특정 코드:

sdfsdfswerwer324234234234

이렇게 하면 p의 콘텐츠를 복사할 수 없습니다!

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

위 내용은 일반적인 CSS 효과 요약에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!