前端基础——简单css样式

1、背景

① 在创建好的div内，设置width和height，给div添加背景图片：url(图片路径) “.”代表上级路径，“/”代表下级路径 ，“./”代表当前同级目录；

background-image: url(./1.jpg);

② 背景大小：可以直接设置大小，或者直接cover自动填满 。

  background-size: cover;

③ 背景居中，一般第①②③步要同时使用。

 background-position: center;

background背景的颜色渐变：

      线性渐变 默认的为从上到下，可设置方向从左到右（to right）

background: linear-gradient(to right , red , yellow); 

代码渲染浏览结果如下，颜色为由左至右为红色到黄色：

还可以设置颜色过渡的百分比

background: linear-gradient(to right , red 50%, yellow 50%); 

渲染结果如下，前一半渲染为红色，后一半渲染为黄色：

如果想前一半为红色，后一半为渐变色则按照下面代码设置：

background: linear-gradient(to right , red 50%, yellow 100%); 

渲染结果如下，前50%为红色，50%-100%为由红色到黄色渐变。

可以设置多种颜色的渐变

 background: linear-gradient(to right , red 30%, blue 60%,yellow 100%);

结果如下：

2、div变形

2D平面下的变形一般可分为4种，分别是旋转、平移、缩放和拉伸。

①旋转：360deg为一周。

  transform: rotate(360deg);

②平移：100px是左右平移 50px是上下平移

  transform: translate(100px,50px);

③ 缩放：1.5是左右缩放 ，1是上下缩放

  transform: scale( 1.5, 1);

④扭曲：15deg是逆时针拉伸，30deg是顺时针拉伸

  transform: skew(15deg , 30deg); 

3、边框

风格（solid：实线 、dashed：虚线 、dotted：点状）

  border: 1px solid black;

border边框实质上是三角形，分上下左右。

上边框颜色
border-top-color: deeppink;
下边框颜色
border-bottom-color: darkturquoise;
左边框颜色
border-left-color: green;
右边框颜色
border-right-color: dodgerblue; 

如果不给div宽和高，只给边框颜色的话，结果如下图所示：