前端基础——简单css样式

柔光的暖阳◎ 2022-12-16 00:48 149阅读 0赞

## 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);

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]  
还可以设置颜色过渡的百分比

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%);

结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 3]

## 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宽和高，只给边框颜色的话，结果如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a380ff64a7764bd58ce9388515dec97b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/310187d2a66c4e6197ca7dbf9a62c46c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/146256b2a608458eac48565b7b304b2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d17850dca1b9461886f8ea1ca235d56d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/f95e39fa17e1498a8a8e7d6cd9ed9f83.png