CSS3知识点

border-radius : 50%;------用百分比圆角定义了椭圆形
opacity: 0.3; ------定义模糊度,如果给图片定义的话,0.1最模糊;1最清晰,就相当于没弄一样。
cursor:pointer;------定义指针样式。pointer---手。default 箭头,crosshair 十字,progress 箭头和沙漏
display: inline;-------inline(行内元素),block(块级元素),inline-block(融合行内于块级)。

设置自适应,当最大宽度为700px的时候,width为49%。

@media only screen and (max-width: 700px){

.class {
    width: 49.99999%;
    margin: 6px 0;
}

}

鼠标放到图片上放大处理:
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。---这个在:hover的里面写
transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

CSS3 外形修饰---轮廓(outline-offset )
outline : 10px solid red;---定义轮廓的边框宽度、什么线、什么色。
outline-offset : 15px;----定义轮廓离边框多远,这里定义15个px距离。

CSS3 弹性盒子(Flex Box)
display: -webkit-flex;------定义弹性盒子(支持-webkit-的浏览器)
display: flex;--------------定义弹性盒子
-webkit-justify-content: center;-------定义弹性项目居中紧挨着填充。
justify-content: center;---------------弹性项目居中紧挨着填充。

body {

direction: rtl;------定义排列顺序从right-to-left

}
flex-direction: row | row-reverse | column | column-reverse

  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
Last modification:November 14th, 2020 at 03:02 pm
If you think my article is useful to you, please feel free to appreciate