all
CSS styles are inherited. Many times we write child-level styles in the hope that they can override parent-level styles. Many times we use important to express its importance, but a large number of repeated imortants will make the css file look confusing, and a
simple You can use the css all attribute to override its style.
All has 3 attributes in total
– initial sets all the attributes of the element to the initial value or fallback value
– inherit sets all the elements to the value of the parent element
– unset sets all the elements Become the value or initial value of the parent element
The compatibility is as follows:
writing-mode
The text is arranged horizontally from left to right and from top to bottom
, so how to make the text vertically arranged
as shown in the figure below
– horizontal-tb Default value
– vertical-lr Text is vertically arranged and from left to right
– vertical-rl Text is aligned vertically and right-to-left
use-selecy
Whether the text can be copied
– auto follow the browser to see if it can be copied
– none cannot be copied
– text can be copied
– all click to copy and double click cannot copy
border-image
Border image
border-image: url (image address) cropping repeatability
- border-image-souce is the only image address that must be transmitted
- border-image-slice crop image
- border-image-repeat The padding of the remaining image after cropping
border-image-slice 裁剪时候有四个方向 上下左右 故border-image-slice 有四个值 跟css padding margin 一致 当我们按照四个角进行裁剪后 剩下的内容就进行填充其余的border 如下所示
半径是15的9个圆 正方性的宽高是90 如果我们按照30的大小进行裁剪 那么裁剪下的大小刚好是一个圆形
border-image-repeat
– stretch 默认值 将图片进行拉伸 直到bordert填充完毕
– repeat 重复图片 图片可能出现不完整的情况
– round 平铺图像 当剩余空间不够平铺图片时候 将对图片进行等比的放大和缩小
– space 平铺图像 当剩余空间不够平铺图片时候 会用不够的空间进行平均分配空隙
border-image-outset 定义图片可超出边框的大小
border-image-width 设置边框的宽度
number | & | auto
设置的宽度跟裁剪一样 有4个方向 上下左右
number 代表当前border宽度的倍数
& 宽高的百分比
auto 则是图片的宽度