CSS常用小技巧

最新推荐文章于 2024-05-08 20:23:24 发布

Han-kanon

最新推荐文章于 2024-05-08 20:23:24 发布

阅读量310

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/baidu_20144723/article/details/71437226

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

单行省略号

<!--强制在一行显示-->
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>