css笔记

【js随机数】///////////////////////////////////

{{Math.round(Math.random()*10+30)}}

【渐变】///////////////////////////////////

线性渐变 - 从上到下（默认情况下）

background-image: linear-gradient(#e66465, #9198e5);

从左到右的线性渐变

background-image: linear-gradient(to right, red , yellow);

线性渐变 - 对角

background-image: linear-gradient(to bottom right, red, yellow);

径向渐变

background: radial-gradient(#f00,#ff0,#0f0);

【高度】///////////////////////////////////

//高度自适应

height: 200px!important;

min-height:200px ;

//自适应高度方法2:用屏幕的高度减去你页面顶部固定的高度。

height: calc(100vh - 120px); 注意减号两边需要各空一格

//自动换行：

word-wrap:break-word;

word-break:normal;

//强制换行：

word-break:break-all;      按字符截断换行 /* 支持IE和chrome，FF不支持*/

word-wrap:break-word;    按英文单词整体截断换行  /* 以上三个浏览器均支持 */

text-overflow: ellipsis;  超出宽度显示3个点

* 注意：单词换行需要父盒子为块级元素 

//强制不换行：

white-space:nowrap;

//样式实现显示隐藏功能

.item>.btn{ visibilty:hidden }

.item:hover>.btn{ visibilty:visible }

//视频

<video width="998" height="505"  autoplay loop="loop" style="mix-blend-mode: lighten;">

  <source src="../img/login/camera.mp4" type="video/mp4">

</video>

================================================

//IE浏览器滚动条样式

body,div{

    scrollbar-arrow-color:#12459c ; /*三角箭头的颜色*/

    scrollbar-face-color: #12459c; /* 能拉动部分的颜色*/

    scrollbar-shadow-color: #12459c;/* 能拉动部分的边框颜色*/

    scrollbar-track-color: #052973; /* 立体滚动条背景颜色 */

}

//google滚动条样式

/* 设置滚动条的样式 */

::-webkit-scrollbar {

    width: 5px!important;

  }

  /* 滚动条滑块 */

  ::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: rgba(31, 97, 198, 0.5);

    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);

  }

  /* 内层滚动槽 */

  ::-webkit-scrollbar-track-piece {

    width: 2px;

    background: rgba(5, 41, 115, 1);

  }

================================================

//固定位置

background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; position: fixed; bottom:0;

背景问题

================================================

//渐变

background-image: linear-gradient(-90deg, red, yellow);

//背景透明

background: transparent;

//视频背景透明

mix-blend-mode: screen;

//背景透明度

opacity:0.2;

//切角效果

方式一：background:linear-gradient(-135deg,transparent 27px, #58a 0);

方式二：

background:

              linear-gradient(-45deg,transparent 15px, yellowgreen 0)bottom right,

              linear-gradient(-135deg,transparent 15px, yellowgreen 0)top right,

              linear-gradient(135deg,transparent 15px, yellowgreen 0)top left,

              linear-gradient(45deg,transparent 15px, yellowgreen 0)bottom left;

              background-size: 50% 50%;

              background-repeat: no-repeat;

//折角效果

background:

              radial-gradient(circle at bottom right,transparent 15px, #58a 0)bottom right,

              radial-gradient(circle at top right,transparent 15px, #58a 0)top right,

              radial-gradient(circle at top left,transparent 15px, #58a 0)top left,

              radial-gradient(circle at bottom left,transparent 15px, #58a 0)bottom left;

              background-size: 50% 50%;

              background-repeat: no-repeat;

//阴影

box-shadow: 10px 10px 5px #888888;

================================================

//样式计算

height: calc(100% - 90px);

//图片加载出错替换成自己的图片

<img id="tvPic" src=""  onerror="break.svg';"/>

//定义了全局样式后，想改变同级别样式的样式

div{background: #0e387e;    }

div.样式｛ background: #0e387e;｝//注意div和样式中间没有空格

//文本溢出时显示省略标记

word-break:keep-all;/* 不换行 */ 

    white-space:nowrap;/* 不换行 */ 

    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 

    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

超出两行或者多行，用省略号：

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

//带箭头的框

<style>

        .border-triangle-bottom {

            width: 100px;

            height: 30px;

            border: 1px solid #1d9cd6;

            position: relative;

            border-radius: 4px;

        }

        .border-triangle-bottom:after,

        .border-triangle-bottom:before {

            content: "";

            position: absolute;

            width: 0;

            height: 0;

            border: 4px solid transparent;

            border-top-color: #1d9cd6;

            left: 50%;

            margin-left: -4px;

            bottom: -8px;

        }

        .border-triangle-bottom:after {

            border-top-color: #fff;

            bottom: -7px;

        }

    </style>

    <div class="border-triangle-bottom"></div>

【动画】///////////////////////////////////

animation-fill-mode属性值：

none: 默认值，播放完动画后，画面停在起始位置

forwards: 播放完动画，停在animation定义的最后一帧

backwards: 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值。

【动画-闪烁】///////////////////////////////////

.animation2 {

;-webkit-animation:twinkling 0.3s infinite ease-in-out;

animation:twinkling 0.3s infinite ease-in-out;

-webkit-animation-fill-mode:both;

animation-fill-mode:both;

}

@-webkit-keyframes twinkling {

0% {

opacity:0.5;

filter:alpha(opacity=20);

-webkit-transform:scale(1);

}

50% {

opacity:1;

filter:alpha(opacity=50);

-webkit-transform:scale(1.12);

}

100% {

opacity:0.5;

filter:alpha(opacity=20);

-webkit-transform:scale(1);

}

}@keyframes twinkling {

0% {

opacity:0.5;

filter:alpha(opacity=20);

-webkit-transform:scale(1);

}

50% {

opacity:1;

filter:alpha(opacity=50);

-webkit-transform:scale(1.12);

}

100% {

opacity:0.5;

filter:alpha(opacity=20);

-webkit-transform:scale(1);

}

}