随笔分类 - CSS3
摘要：clip-path介绍 clip-path可以把一个div元素裁剪成不同的形状，换句话说，可以把div元素不想要的部分剪掉。 clip-path从每个点的坐标着手，沿坐标的路径进行裁剪。 circle裁剪圆形 circle(半径 at 圆心x坐标 圆心y坐标) .content { width: 2
阅读全文
摘要：<div class="status-name"> <span class="status" :class="item.status | statusColorFilter">{{ item.status_display }}</span> <span class="name">{{ item.na
阅读全文
摘要：一直以来，都以为margin-top设置百分比的话是基于父元素的高度计算的，今天实际用到的时候却发现并非如此，实际上是基于父元素的高度来计算的。 如果我们想让某个元素垂直居中，最快最好的方式是设置父元素为flex布局：display:flex;然后再利用两个属性即可： justify-content
阅读全文
摘要：```css
.star::before { content: "*"; color: #f56c6c; margin-right: 4px;
} ```
阅读全文
摘要：效果如图： border-radius共有8个属性值，有四个角，每个角对应两个值（分别是x轴和y轴的值）。 border-radius: 0 20% 20% 0/0 50% 50% 0; /的左右两边分别是四个角的x轴值/y轴值。
阅读全文
摘要：1. transition 一定时间之内，一组css属性变换到另一组属性的动画展示过程。 属性： transition-property：动画展示哪些属性，可以使用all关键字； transition--duration：动画过程有多久； transition-timing-function:lin
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <m
阅读全文
摘要：1. transform-style(preserve-3d) 建立3D空间 2. perspective 景深 3. perspective-origin 景深基点 4. backface-visibility 隐藏背面 5. transform新增函数 rotateX() rotateY() r
阅读全文
摘要：1. calc() calc()：在流体布局上，可以通过calc()计算得到元素的宽度。 2. vw/vh/vmin/vmax的使用 vw/vh/vmin/vmax是视窗单位，也是相对单位。相对的不是父节点或页面的根节点，而是由视窗（viewport）的大小决定的，单位1，代表类似于1%。 视窗是浏
阅读全文
摘要：1turn：一圈，一个圆共一圈。 90deg = 0.25turn。
阅读全文
摘要：1 .footer-container .footer-content p .motto { 2 font-weight: bolder; 3 -webkit-background-clip: text; 4 -webkit-text-fill-color: transparent; 5 background-image: linear-gradient(to r...
阅读全文
摘要：1. Tippy.js background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);（body背景色） background: linear-gradient(135deg,#56c8ff,#6f99fc) no-repeat;（bu
阅读全文
摘要：table中表头不动，表体产生滚动条
阅读全文
摘要：translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于
阅读全文
摘要：input:checked ~ label ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input 和 label标签有共同的父元素］； input:checked ＋ label ：相邻同胞选择器，选择被选中的input标签后 第一个label标签［input 和 lab
阅读全文
摘要：利用css修改input的checkbox样式
阅读全文
摘要：1 /* 修改placeholder样式，兼容性 新版火狐，IE10+ */ 2 .login-input::-webkit-input-placeholder { 3 color: #000; 4 font-size: 0.3rem; 5 transition: .5s; 6 ...
阅读全文
摘要：1 <html> 2 3 <head> 4 <style type="text/css"> 5 h1 {text-transform: uppercase} 6 p.uppercase {text-transform: uppercase} 7 p.lowercase {text-transform
阅读全文