Css学习_4其他属性

Css学习_4其他属性

渐变色

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• 径向渐变（Radial Gradients）- 由它们的中心定义

// 从上到下
background: linear-gradient(red, blue); /* 标准的语法 */
// 从左到右
background: linear-gradient(to right, red , blue)
// 从左上到右下
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
// 透明度的使用
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

阴影

文字阴影和盒子阴影

• text-shadow

• box-shadow

// 用法： text-shadow: 水平阴影 垂直阴影 模糊的距离 阴影的颜色;
h1{
    text-shadow: 5px 5px 5px #FF0000;
}
div {
    box-shadow: 10px 10px 5px #888888;
}

权重属性

<style> 
#main
{
  width:220px;
  height:300px;
  border:1px solid black;
  display:flex;
}
#main div
{
  flex:1;
}
</style>
​
<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

需要申明display:flex，设置flex:1

属性改变

.rotate:hover .fill {
  transform: rotate(45deg);
}

.rotateX:hover .fill {
  transform: rotateX(45deg);
}

.scale:hover .fill {
  transform: scale(2, 2);
}

.scaleX:hover .fill {
  transform: scaleX(2);
}

.skew:hover .fill {
  transform: skew(45deg, 45deg);
}

.skewX:hover .fill {
  transform: skewX(45deg);
}

.skewY:hover .fill {
  transform: skewY(45deg);
}

.translate:hover .fill {
  transform: translate(45px, 1em);
}

.translateX:hover .fill {
  transform: translateX(45px);
}

.translateY:hover .fill {
  transform: translateY(45px);
}

.matrix:hover .fill {
  transform: matrix(2, 2, 0, 2, 45, 0);
}

matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。