css3总结

最新推荐文章于 2023-03-16 17:16:44 发布

qq_27084325

最新推荐文章于 2023-03-16 17:16:44 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/qq_27084325/article/details/52202702

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总结</title>
</head>
<body>
    <!--
 border
 border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;
地址，1 向上挤，2 向右拉伸，3 向下拉伸， 4 向左拉伸

 boder-radius:12px;
 最大为高度的一半

 box-shadow:12px 12px 10px red;
左右，上下，扩散，颜色


background
background-origin:padding;/border/content
决定背景开始显示的区域
-->


<!--
color
background-color: hsla(0,100%,50%,0.2);
1 色调，2 饱和度，3 亮度，4 透明度

opacity:0.25;
0 - - 1 透明度

background-color: rgba(0,0,0,0.5);

text
text-overflow: ellipsis;
当对象溢出时用点号省略

word-wrap:break-word; normal内容不换行
内容将在边界换行

用户界面
box-sizing: border-box;

outline
颜色，轮廓，宽度，偏移位置

盒子基础模型
overflow: visible auto hidden scroll;

    -->


<!--
p[title^="val"]{}
匹配具有title属性，且值以val开头的p元素

p[title$="val"]
匹配具有title属性，且值以val结尾的p元素

p[title*="val"]
匹配具有title属性，且值含有val的p元素

html:root {}
匹配文档的根元素

p:nth-child(2) {}
匹配元素中的第2个p元素

p:nth-last-child(1) {}
匹配父类元素中倒数第1个结构的p元素

p:nth-of-type(3){}
匹配同类型中的第3个同级兄弟元素p

p:nth-last-of-type(2){}
匹配同类型中的倒数第2个同级兄弟元素p
-->
</body>
</html>