渐变、阴影及文本设置

最新推荐文章于 2022-11-05 14:01:59 发布

YourLie_in_April

最新推荐文章于 2022-11-05 14:01:59 发布

阅读量490

点赞数 1

分类专栏： HTML、CSS 文章标签： css html5

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123971023

版权

HTML、CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

渐变分为两种：线性渐变和径向渐变。

linear-gradients线性渐变: 颜色沿着一条直线过渡：从左到右to right、从右到左to left、从上到下to bottom、从左下到右上to right top等。

radial-gradients径向渐变: 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。(circle以圆形径向渐变。可设置颜色百分比，最大为100%，来调节第几个颜色所占颜色的百分比。)

text-shadow：文字阴影

属性值：h-shadow （必需），水平阴影的位置，允许负值、v-shadow（必需），垂直阴影的位置，允许负值、blur（可选），模糊距离 ★ 如果设置的是0 那么将和正常的文字清晰度一样、color（可选），阴影的颜色。

文本显示属性：

overflow: hidden; 溢出隐藏。

white-space:nowrap; 文本不会换行，在同一行继续。

text-overflow: ellipsis; 用省略号来代表被修剪的文本。

实现多行省略号必须设置：

overflow: hidden; （溢出隐藏）

text-overflow: ellipsis;（用省略号来代表被修剪的文本）

display: -webkit-box;（必须设置的盒子属性）

-webkit-line-clamp: 3;（第3行超出显示省略号）

word-break: break-all;（破坏英文单词的整体性，即一个单词可分两行显示）

-webkit-box-orient: vertical;（垂直展示，文字是多行展示的情况下使用）

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新书热卖榜</title>
    <style>
    *{padding: 0;margin: 0;}
.new_book{
    width: 250px;
}
.new_book .title{
    height: 40px;
    line-height: 40px;
    padding-left: 34px;
    font-size: 16px;
    color: black;
    background: url(./imgs/sprite.png) 5px 4px no-repeat;
}
.new_book .title a{
    color: black;
    font-weight: 700;
    text-decoration: none;
}
.new_book .zt .dh ul{
    list-style: none;
    display: block;
    height: 25px;
}
.new_book .zt .dh ul li{
    width: 48px;
    display: inline-block;
    border: 1px solid #eaeaea;
    text-align: center;
    height: 20px;
    line-height: 20px;
    padding: 2px 0 1px;
}
.new_book .zt .pl span[class*=sz]{
    font-size: 16px;
    height: 24px;
    color: red;
    margin-left: 4px;
}
.new_book .zt .pl .szyi{
    vertical-align: top;   
}
.new_book .zt .pl .nr img{
    display: inline-block;
    width: 120px;
    height: 120px;
}
.new_book .zt .pl .nr a{
    line-height: 22px;
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-left: 0;
}
.new_book .zt .pl .nr div{
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
}
.new_book .zt .pl ul li{
    border: 1px solid #eaeaea;
}
.new_book .zt .pl ul li a{
    color: black;
    text-decoration: none;
    line-height: 36px;
    font-size: 12px;
    margin-left: 12px;
}
.new_book .zt .pl span[class*=zs]{
    font-size: 16px;
    height: 24px;
    color: black;
    line-height: 24px;
    margin-left: 4px;
}
.new_book .zt .dh .zb{
    color: #53A887;
    text-decoration: underline;
    border-bottom: none;
}
.new_book .zt .pl .nr .xjyi{
    color: red;
}
.new_book .zt .pl .nr .yjyi{
    color: #A7A7A7;
    text-decoration: line-through;
}
.new_book .zt .pl .nr .plyi{
    color: #76928B;
}
    </style>
</head>
<body>
    <div class="new_book">
        <div class="title">
            <a href="#">新书热卖榜</a>
        </div>
        <div class="zt">
            <div class="dh">
                <ul>
                    <li class="zb">总榜</li><li>童书</li><li>励志</li><li>保健</li><li>美食</li>
                </ul>
            </div>
            <div class="pl">
                <ul>
                    <li class="nr">
                        <span class="szyi">1</span>
                        <img src="./imgs/book.jpg">
                        <div>
                            <span class="mzyi"><a href="#">极地重生沙<br>克尔顿南极</a></span><br>
                            <span class="xjyi">￥40.10</span><br>
                            <span class="yjyi">￥68.00</span><br>
                            <span class="plyi">333条评论</span>
                        </div>
                    </li>
                    <li><span class="sz">2</span><a href="#">奇幻梦境：一本漫游奇境的手绘</a></li>
                    <li><span class="sz">3</span><a href="#">奇幻梦境：一本漫游奇境的手绘</a></li>
                    <li><span class="sz">4</span><a href="#">奇幻梦境：一本漫游奇境的手绘</a></li>
                    <li><span class="zs">5</span><a href="#">奇幻梦境：一本漫游奇境的手绘</a></li>
                    <li><span class="zs">6</span><a href="#">奇幻梦境：一本漫游奇境的手绘</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

总结：望各位大佬指正。

YourLie_in_April

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变、阴影及文本设置

渐变分为两种：线性渐变和径向渐变。linear-gradients线性渐变:颜色沿着一条直线过渡：从左到右to right、从右到左to left、从上到下to bottom、从左下到右上to right top等。radial-gradients径向渐变:圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合。(circle以圆形径向渐变。可设置颜色百分比，最大为100%，来调节第几个颜色所占颜色的百分比。)text-shadow：文字阴影属性值：h-shadow...
复制链接

扫一扫