Css3概念知识点

置顶林中明月间。

已于 2022-06-29 20:51:50 修改

阅读量1k

点赞数 1

分类专栏： Css3 文章标签： css3 前端 css

于 2018-04-14 15:11:20 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/79940442

版权

Css3 专栏收录该内容

68 篇文章 2 订阅

订阅专栏

类似span标签的还有那些？

em、strong、i、b、 font-style:normal; small label span time 内联标签

<i></i> 和 <em></em>标签

相同：都是表示斜体。

区别：

（1）<em>表示被强调呈现的内容，<i>是物理上的斜体，没有内容上的意义。

（2）<em>标签是“含有语义”的标签，搜索引擎会了解这些语义。

<strong> 和 <b> 标签

<strong>是逻辑标签，加强字符的语气，表示强调。也可通过css来改变strong的具体表现。

<b>是实体标签，表示加粗.

CSS3新特性有哪些？ - html中文网 css3新特性

/deep/ 深度选择器:vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，这种情况下你可以使用 `/deep/` 或 `::v-deep` 操作符取而代之——两者都是 `>>>` 的别名，同样可以正常工作。 ( >>> 的别名) 例子:

Vue 里面可以多个style标签

加了这个scoped 就用/deep/
<style lang="scss" scoped>
    .wrap{
  .class1{
      font-size:12px;
  }
    /deep/ .class2{
       font-size:20px; //对所有子组件生效.
        /deep/ .class3{   }  //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效
    }
}

</style>

.mint-radiolist /deep/ .mint-cell-title {
　　margin-top: 0.3rem;
}

<style>
直接覆盖
.wrap .class1{
      font-size:12px;
  }
</style>

caret-color : 改变输入框光标颜色，同时又不改变输入框里面的内容的颜色
caret 表示‘插入符号’,指处于内容可插入状态的光标

input{
    color:blue;
    caret-color: red;
}

cssdiv四角贴图

CSS设置div四个角的样式_花铛-CSDN博客_css 四个角

background: url("~@/assets/view_images/Corner-TL.png") no-repeat -7px -7px,
      url("~@/assets/view_images/Corner-TR.png") no-repeat 100.5% -7px,
      url("~@/assets/view_images/Corner-BL.png") no-repeat -7px 100.5%,
      url("~@/assets/view_images/Corner-BR.png") no-repeat 100.5% 100.5%;
background-color: rgba(0, 0, 0, 0.4);/*写在下面可以同时显示*/

当元素没有定义宽度高度就可以给它写 max-width、max-height

引用线上css：

@import url(http://fonts.useso.com/css?family=Ubuntu);

html引用ttf字体文件

@font-face{
    font-family:politicaregular;
    src:url("./fonts/politicaregular.ttf");
}

-webkit-（谷歌 safari）或 -moz- （火狐）-o-Opear -ms- 为指定浏览器的前缀。

border-radius: 0 30px 30px 0; // 左上右上右下左下

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

比如在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的 div 或者其它元素一般都会给个宽高，或者 relative 的元素可以不给宽高，这个时候，这些元素就会盖住下面的地图层，以至于地图层无法操作。那么我们就可以给这个 div 设置 pointer-events: none，然后你就会发现下面的地图就可以拖动和点击了。但是悲剧的是，操作区域本身却无法操作了，直接被无视掉了，不过不用担心，我们可以给里面的元素重新设置为 pointer-events:auto，当然，只给需要操作的元素区域设置。

input[type="checkbox"]:checked+label:after  属性选择器

overflow使用方法：若子元素宽高超出父元素。就给父元素设置overflow：auto/hidden;就可以滚动了或者隐藏了

border-image

<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round /* 图片铺满整个边框 */
{
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch /* 图片被拉伸以填充该区域 */
{
-moz-border-image:url(/i/border.png) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;	/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="/i/border.png">

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>

</body>

标题左边的圆竖线
._title:after { // 和标题的class(加 position: relative;) 写在一起
    content: "";
    height: .18rem;
    width: .04rem;
    border-radius: .02rem;
    background-color: #ff5555;
    left: 0;
    top: 0;
    position: absolute;
}

css:
.ketang_menu{
    width: 90%;
    height: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.ketang_menu .wrap{
    width: 300%;
    height: 100%;
    display: flex;
}
.ketang_menu::-webkit-scrollbar { //隐藏滚动条
    display: none;
}
.ketang_top .ketang_menu a{
    font-size: 0.3rem;
    color: #999999;
    margin: 0 0.2rem;
}

html:
<div class="ketang_menu">
    <div class="wrap">
       <a href="" class="active">注册安全工程师</a>
       <a href="">安全管理人员</a>
       <a href="">安全管理人员</a>
       <a href="">安全管理人员</a>
       <a href="">安全管理人员</a>
       <a href="">安全管理人员</a>
     </div>
</div>

CSS3实现加载页面时的网页淡入效果：

body{
    -webkit-animation: bgbody 3s ease;
    -o-animation: bgbody 3s ease;
    animation: bgbody 3s ease;
}
@keyframes bgbody {
    0%{
        opacity: 0;
        background-color: #ffffff;
    }
    100%{
        opacity: 1;
    }
}

background:linear-gradient();线性渐变

background: linear-gradient(left, #000, rgba(255, 255, 255, 0)); 左到右效果如下：

background:linear-gradient(

left,
red 20%,
green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
green 90%,
black 51%
);
接下来：
background:linear-gradient(
tansparent 49%,红色这里改成透明红色占49%
green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
green 51%,中间绿色就只占2%（51-49）
transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51%
)
font: bold 100px/200px "微软雅黑"; 加粗字的大小行高字体

布局：

column-width:栏目宽度；

column-count:栏目列数；

column-gap:栏目距离;

column-rules:栏目间隔线;

图片倒影：
img{
display: block;
margin: 200px auto;
-webkit-box-reflect:left 0px;/*图片倒影*/
/*-webkit-box-reflect:direction npx;
left right above上 below 下像素
*/
}

图片可以随便拖拽：
<style>
.box{
width: 300px;
height: 200px;
background: url(img/3.jpg);
border: 5px solid #000;
resize:both;/*图片拖拽*/
overflow: auto;/*必须配合overflow:auto 一起*/
}
</style>
</head>
<body>
<div class="box">
</div>

如果导航栏的边框线有重合的：
可以在css中加：margin-left：-1px;就没有重合了。
img{
filter:blur(10px);模糊10个像素
}
background-clip:（背景裁切）
1.border-box;默认
2.padding-box;
3.content-box;内容
盒模型：
border：边框区域；
padding:内填充;
content:内容区；
使用例子：
.drog{
width: 520px;
height: 640px;
background: rgba(255,255,255,.5);
border: 2px solid red;
background-clip: content-box;
padding: 5px;//一般与前面三个属性配合使用
border-radius:8px;
}

.input{
outline: none;
height: 30px;
border: none;
border-bottom: 2px solid #000;
transition:.8s;
}
.input:focus{/*当鼠标点击加底部横线*/
border-bottom-color: black;
}
.input:focus::-webkit-input-placeholder{
transition:0.5s;
}
.input:focus::-webkit-input-placeholder{
color: black;
transform:scale(0.6) translateY(-3px);
transform-origin:left top;
/*鼠标点击提示字缩小并且文字往上位移3个距离靠左上角*/
}
<tr>
<td class="td_left">姓名:</td>
<td><input type="text" class="input" placeholder="请输入名字"/></td>
</tr>

input 的id可以和label的for相互绑定：
<input type="checkbox" class="input3" name="doof" id="shucai"/>
<label for="shucai" class="label2"></label> 熟菜

a 的href 可以与div的id相互绑定 css：.content:target{/*它会匹配#号后面的内容*/display:block;}
<div class="content" id="div1">网站内容1</div>
<a href="#div1">网站首页</a>

边框：
border-radius 属性被用于创建圆角：
div
{
border:2px solid;
border-radius:25px; 值越大越圆
}

box-shadow 属性被用来添加阴影:（卡片）
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) ;
margin-bottom: 25px;
}

div.container {
text-align: center;
padding: 10px 20px;
}

<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>

border-image 属性允许你指定一个图片作为边框：
#round ：平铺
{
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
border-image:url(border.png) 30 30 round;上下左右
}
?
#stretch ：拉升
{
-webkit-border-image:url(border.png) 30 30 stretch;
-o-border-image:url(border.png) 30 30 stretch;
border-image:url(border.png) 30 30 stretch;上下左右
}

背景：
background-image: url(img_flwr.gif), url(paper.gif);背景图片（可以多个背景）
background-size:100px 80px;背景大小：上下左右
background-repeat:no-repeat;不重复
background-Origin属性指定了背景图像的位置区域。

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:center;控制背景位置
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;图片靠近的区域
}
#div2
{
background-origin:padding-box;
}

background-clip：规定背景的绘制区域取值：content-box 和 padding-box

渐变：线性渐变linear-gradient 和径向渐变Radial Gradients
ackground: linear-gradient(direction, color-stop1, color-stop2, ...);控制方向（多个颜色）可以控制透明度
background: linear-gradient(angle, color-stop1, color-stop2);控制角度
repeating-linear-gradient() 函数用于重复线性渐变：

从上到下渐变
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue); 标准的语法（必须放在最后）
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

从左到右：
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red , blue); 标准的语法（必须放在最后）

-webkit-linear-gradient：控制渐变的开始方向不写默认为从上到下

对角：左上右下
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue); 标准的语法（必须放在最后）
}

径向渐变由它的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
例子：
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
由中心向外默认形状为椭圆颜色后面都可以接百分比例如(red 5%, green 15%, blue 60%)
circle 表示圆形，ellipse 表示椭圆形

文本阴影：
h1
{
text-shadow: 5px 5px 5px #FF0000; 左右上下模糊颜色
}
div {
box-shadow: 10px 10px grey; 左右上下模糊颜色
}

阴影的一个使用特例是卡片效果： box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

CSS3中，自动换行属性允许您强制文本换行
text-wrap 规定文本的换行规则。
允许长文本换行:
p {word-wrap:break-word;}

单词拆分换行：
p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

2D 3D转换
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg)；控制最后一行

rotate（30deg）旋转
transform（50px，100px）平移：上下左右
scale(2,3) 放大：高度宽度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴

3D：
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);
}

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);
}
translate3d(x,y,z)：translateX(x) translateY(y) translateZ(z)
以此类推 scale rotate

2D 3D区别 3D在前面加 x y z

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
条件：
指定要添加效果的CSS属性
指定效果的持续时间

transition: width 2s;
-webkit-transition: width 2s; 宽度属性过渡

多项过渡保持原样先用：transition（转换） hover：trasfrom（旋转）
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; //
transition: width 2s, height 2s, transform 2s;//
}

div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotateY(360deg);//
transform: rotateY(360deg);（3D）//
}

CSS3 动画
把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

调整尺寸(Resizing)
div
{
resize:both;
overflow:auto;
}
外形修饰（outline-offset ）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

使用 border 属性来创建缩略图。：
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

图片文本
<style>
.container {
position: relative;
}

.bottomright {
position: absolute;
bottom: 8px;
right: 16px;(text-align:center)
font-size: 18px;
}

img {
width: 100%;
height: auto;
opacity: 0.3;
}
<div class="container">
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">右下角</div>
</div>

图片滤镜：
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

cursor: not-allowed;禁用

分页：
鼠标悬浮点击背景颜色字体变化
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>

css3弹性盒子
CSS3 弹性盒（ Flexible Box 或 flexbox）
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</style>
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：对齐排。
column：纵向排列。
column-reverse：纵向对齐排。