CSS样式整理

最新推荐文章于 2022-08-12 13:54:47 发布

阿巴的光之逆子

最新推荐文章于 2022-08-12 13:54:47 发布

阅读量220

点赞数 2

CC 4.0 BY-SA版权

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/hellow_tommer/article/details/120797934

这篇博客详细介绍了CSS中的关键样式特性，包括如何设置元素的阴影效果，边框样式，创建线性和对角渐变，实现过渡动画，以及如何将内容分布到多列。同时，展示了如何使用overflow属性来隐藏溢出内容并添加省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

css样式整理，现在并不全，以后会慢慢补全的

学习内容：

1.css阴影

  样式:   box-shadow: 10px 10px 5px #888888;


 box-shadow: 10px（X轴偏移[可负]）  10px（y轴偏移[可负]）   5px（模糊度）  #888888（颜色）;
                    
    h-shadow	  必需的。水平阴影的位置。允许负值

    v-shadow	必需的。垂直阴影的位置。允许负值

    blur	可选。模糊距离

    spread	可选。阴影的大小

    color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

    inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

2.css边框

 border:5px solid red;

单独设个边

    border-top-style:dotted;

    border-right-style:solid;

    border-bottom-style:dotted;

    border-left-style:solid;
线形

例：border-top-style:dotted;

  dotted: 定义一个点线边框

  dashed: 定义一个虚线边框

  solid: 定义实线边框

  double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

  groove: 定义3D沟槽边框。效果取决于边框的颜色值

  ridge: 定义3D脊边框。效果取决于边框的颜色值

  inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

  outset: 定义一个3D突出边框。 效果取决于边框的颜色值

3.渐变

(1).线性渐变

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

background: linear-gradient(direction(方向), color(第一种颜色), color(第二种颜色), ...)

  background: linear-gradient(to right, red , yellow);(从左到右)

(2)渐变对角

 background: linear-gradient(to bottom right, red, yellow);(左上到右下)

写对角的方向

4.css过渡

hover:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<style> 
div
{
	width:50px;
	height:50px;
	background:green;
	transition:width 3s;
	-webkit-transition:width 3s; 
}

div:hover
{
	width:300px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

5.css多列

样式:

(1)将 <div> 元素中的文本分为 3 列

    div {
        -webkit-column-count: 3;
        -moz-column-count: 3; 
        column-count: 3;
    }

(2)多列中列与列间的间隙

    div {
        -webkit-column-gap: 60px; 
        -moz-column-gap: 50px; 
        column-gap: 40px;
    }

(3)column-rule-style 属性指定了列与列间的边框样式

    div {
        -webkit-column-rule-style: solid;
        -moz-column-rule-style: solid;
        column-rule-style: solid;
    }


column-count	指定元素应该被分割的列数。

column-fill	指定如何填充列

column-gap	指定列与列之间的间隙

column-rule	所有 column-rule-* 属性的简写

column-rule-color	指定两列间边框的颜色

column-rule-style	指定两列间边框的样式

column-rule-width	指定两列间边框的厚度

column-span	指定元素要跨越多少列

column-width	指定列的宽度

columns	column-width 与 column-count 的简写属性。

6.溢出隐藏

   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;