css中的特殊样式或少见样式整理

div保留四个角的边框

• 在项目中遇到了一个比较少见的样式, 一个div盒子, 只保留盒子边框的四个角, 而其余地方不要. 之前也没有遇到过, 经过多方查证, 最终解决了这个问题, 再此以作记录.
• 在其中用到的是background下的linear-gradient属性和background-size 通过设置背景图的方式来解决这个问题, 具体思路如下
  • linear-gradient: 它可以创建一个由两种或多种颜色延直线进行线性过度的一个图像, 这里我们两个颜色设置成相同的即可
  • 然后通过left和top的配合对其进行定位比如: linear-gradient(to left, #f00, #f00) left top no-repeat, 就是该条线从右到左,颜色都是#f00 然后定位到左上角, 不重复显示, 其余的线同理, 如果括号内是 to bottom 就是从上到下, 然后给定 right top定位到右上角,其余同理
  • 然后通过background-size设置每个渐变线的大小
  • 整体代码如下

  background:
  linear-gradient(to left, #f00, #f00) left top no-repeat,
  linear-gradient(to bottom, #f00, #f00) left top no-repeat,
  linear-gradient(to left, #f00, #f00) right top no-repeat,
  linear-gradient(to bottom, #f00, #f00) right top no-repeat,
  linear-gradient(to left, #f00, #f00) left bottom no-repeat,
  linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
  linear-gradient(to left, #f00, #f00) right bottom no-repeat,
  linear-gradient(to left, #f00, #f00) right bottom no-repeat;
  background-size:
  1px 5px,
  5px 1px,
  1px 5px,
  5px 1px;
  

限定多行文字显示, 超出后显示省略号

• 启动外层盒子的flex布局并让其垂直排列, 如果需要支持老版本浏览器可以使用display: -webkit-box; -webkit-box-orient: vertical; 该段代码同display: flex; flex-direction: column.
• 然后使用line-clamp: , 来限制文本显示的行数, 该方法是用来限制在一个块级元素中显示内容的行数的
• 如果需要兼容老版本的话使用-webkit-line-clamp.
• 然后通过overflow: hidden对超出限制行数的文本进行隐藏
• 最后通过text-overflow: ellipsis; 来表示当文本被剪切的时候,用省略号来表示被剪切的部分
• 代码如下, 该部分代码采用了兼容老版本浏览器的写法

display: -webkit-box; /*弹性伸缩盒子*/
-webkit-box-orient: vertical; /*子元素垂直排列*/
line-clamp: 3;
-webkit-line-clamp: 3; /*显示的行数*/
overflow: hidden; /*溢出部分隐藏*/
text-overflow: ellipsis; /*溢出部分用省略号显示*/

元素模糊及置灰并禁止点击

• 元素模糊
  • -webkit-filter: blur(5px): 该代码针对的是webkit内核的浏览器, 意思是设置模糊滤镜效果, 并表示内容元素被模糊五像素
  • filter: blur(5px): 该段代码适用于支持css滤镜功能的现代浏览器,也是指定一个元素被模糊五像素的结果

/* 马赛克 */
.mosaic {
  -webkit-filter: blur(5px);
  /* Chrome, Safari, Opera */
  filter: blur(5px);
}

• 禁止点击并置灰
• pointer-events: 设置元素是否对鼠标事件做出反应

  pointer-events: none;
  opacity: 0.6;