笔记--CSS.md

2019/01/15

CSS华丽demo

2019/11/13

CSS滤镜 filter属性

filter属性解释

transform: rotate(45deg);

border

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

CSS实现文字下面波浪线动画效果

.flow-wave {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}

.flow-wave {
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

CSS小技巧

2019/10/21

• CSS 专业技巧
• 提高幸福感的 9 个 CSS 技巧
• 你未必知道的49个CSS知识点
• animate.css
• 你能实现多少种水平垂直居中的布局（定宽高和不定宽高）

2019.10.23

非table 布局 重叠边框合并方法

.item{
 margin-right: -1px;
}

合理使用变量

变量定义的语法是： --； // *为变量名称。 变量使用的语法是：var()；

1. 无论是变量的定义和使用只能在声明块 {} 里面
2. CSS 变量字符限制为： [0-9]、[a-zA-Z]、_、-、中文和韩文等。

:root {
    --blue_color: #3388ff;
    --main_bgcolor: #fafafa;
    --font_size_12: 12px;
    --font_size_14: 14px;
    --color: 20px;
}

.div1{
    background-color: var(--main_bgcolor);
    font-size: var(--font_size_12);
}

使用伪类 + transform

.failTipContent {
    font-size: 13px;
    color: #fff;
    background: #434A5F;
    border-radius: 4px;
    padding: 5px 9px;
    word-break: break-all;
    z-index: 9;

    //向下伪类三角
    &::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #434A5F;
        position: absolute;
        bottom: -5px;
        left: 18px;
        transform: translateX(-50%) rotate(135deg);
    }
}

从 html 元素继承 box-sizing

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;。

文字超出省略、文字两端对齐

2019.10.21

box-sizing

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

unset

CSS关键字,

• 从其父级继承，则将该属性重新设置为继承的值，该值等同于 inherit
• 如果没有继承父级样式，则将该属性重新设置为初始值,该值等同于 initial

重置元素的属性时，不需要重置每个单独的属性：

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

重置css button时，我们会一个一个值进行设置，可以用unset完美解决

button {
  all: unset;
}

使用 :not() 选择器来决定表单是否显示边框

.nav li:not(:last-child){
    border-right: 1px solid #666;
}

垂直居中任何元素

1. flex 布局
2. grid布局

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

使用 .not()

隐藏没有静音、自动播放的影片

video[autoplay]:not(muted){
    display: none;
}

使列表的每项都由固定符合分隔，如逗号、【】

1. 逗号分割

.span_map:not(:last-child)::after{
  content: ',';
}

2.【】区分

.span::before{
  content: '【';
}
.span::after{
  content: '】';
}

注意： 这一技巧对于无障碍，特别是屏幕阅读器而言并不理想。而且复制粘贴并不会带走CSS生成的内容，需要注意。

使用负的 nth-child 来选择元素

li {
  display: none;
}

/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}
/*或*/
/* 选择除前3个之外的所有项目，并显示它们 */
li:not(:nth-child(-n+3)) {
  display: none;
}

使用 max-height 来建立纯 CSS 的滑块

max-height

当 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

.intro > * {
  margin-bottom: 1.25rem;
}

.button-disabled{
    opacity: 0.5;
    pointer-events: none;
}