CSS常用小技巧

来源：互联网发布：淘宝潮男秋装编辑：程序博客网时间：2024/06/04 23:18

单行省略号

<!--强制在一行显示-->white-space: nowrap;<!--多与文本显示省略号-->text-overflow: ellipsis;

多行省略号

text-overflow: ellipsis;/*必须属性，定义容器的和模型*/display: -webkit-box;/*必须属性：定义内容的排列方向或排列顺序*/-webkit-box-orient: vertical;/*必须属性：省略号出现的位置（文本结束的位置）*/-webkit-line-clamp:3;

透明度

<!--会影响子元素的透明度-->div{filter:alpha(opacity=50);} /* for IE8 and earlier */div{opacity:.5;} /* for IE9 and other browsers */<!--不会影响子元素-->rgba

CSS3实现叉号

<!DOCTYPE html><html><head>    <title>chahao</title><style type="text/css">span{    display: inline-block;    width: 12px;    height: 2px;    font-size: 0;    line-height: 0;    vertical-align: middle;     background: red;    transform: rotate(45deg);}span:after{    content: '';    display: block;    width: 12px;    height: 2px;    background: red;    -webkit-transform: rotate(-90deg);}</style></head><body><span></span></body></html>

文字环绕图片

img{        float: left;        width: 100px;        height: 100px;        /*改成圆形图片*/        border-radius:50% ;        /*文字圆形环绕*/        shape-outside: circle(50%);    }

改变选择文件的图标

```html label{        display: inline-block;        width: 60px;        height: 60px;        background: url("images/shangchaun.png") no-repeat;        background-size: contain;    }<label for="images"></label><input type="file" id="images" hidden/> <br/>```

引入视频音频文件

<video controls preload="auto" autoplay poster="">    <source src="video/oceans-clip.mp4">    <source src="video/oceans-clip.webm">    <source src="video/oceans-clip.ogv">    你的浏览器不支持video，请更换浏览器。</video>

视频播放

```html<body><video id="video">    <source src="video/oceans-clip.mp4">    <source src="video/oceans-clip.webm">    <source src="video/oceans-clip.ogv">    你的浏览器不支持video，请更换浏览器。</video><p>    <a href="javascript:;" id="play">播放/暂停</a>    <a href="javascript:;" id="full">全屏</a>    <a href="javascript:;" id="back">恢复默认窗口</a>    <input type="range" min="0" max="1" step="0.1" id="range"/></p><script>    window.onload=function(){        (function(){            var v = document.getElementById('video');            var play = document.getElementById('play');            var full = document.getElementById('full');            var back = document.getElementById('back');            var range = document.getElementById('range');            play.onclick=function(){                if(v.paused) {                    v.play();                    this.innerHTML = '暂停';                }else{                    v.pause();                    this.innerHTML='播放';                }            };            full.onclick =function(){                v.width = document.body.clientWidth;            };            back.onclick=function(){                v.width='640';            };            range.onchange=function(){                v.volume = range.value;//                console.log(range.value);            }        })();    };</script>```

拖拽

<div ondragover="over(event)" ondrop="draga(event)">    <img src="images/two.jpg" alt="" id="drag" draggable="true"            ondragstart="start(event)"/>    <p id="aa" draggable="true"       ondragstart="start(event)">这是文字</p></div><!--1、给拖拽元素添加属性 draggable='true' 定义元素可以被拖动    2、开始拖动事件：dragstart：元素被拖动一刹那触发的事件    3、拖动元素进入目标区域，dragover，被拖动元素一进入就触发    4、被拖动元素被丢下事件，drag，被拖动元素被拖到目标区域后，鼠标松开触发的事件--><div ondragover="over(event)" ondrop="draga(event)" id="div2"></div><script>        function start(e){            e.dataTransfer.setData('text', e.target.id);            /*将拖动元素的id储存到dataTransfer对象上面             * dataTransfer浏览器的内置剪切板             * setData,将目标对象的id存到变量text中             * */            console.log(e);        }        function over(e){            e.preventDefault();            /*组织默认事件，浏览器以url的方式打开这个元素*/        }        function draga(ev){            ev.preventDefault();            var data=ev.dataTransfer.getData("text");            console.log(data);            console.log(ev.target);            ev.target.appendChild(document.getElementById(data));        }</script>

0 0