style | 不是第一

弧度圆角

语法

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

border-radius使用

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：

仅设置一个值

设置四个方向的值 border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;

使用px表示数值的情况在使用px来表示圆角值的时候，圆角的弧度一般都是一个圆形的部分弧形，具体呈现的显示效果我是按如下方法与预估和理解的：假设一个长200px，高150px的div对象，设置它的border-radius的值为30px，那么实际呈现的圆角，其实就是一个以30px为半径的圆顶格放置在四个边角后所呈现的弧度

阴影

演示样例open in new window 语法

div {
    box-shadow: h-shadow v-shadow blur spread color inset;
}
/* 注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，
每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。
省略长度的值是 0。 */

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
 box-shadow:  5px  5px 5px    #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

转义符 pre-line

html 识别不了 ‘\n’，只要在结果所在的标签设置css样式：

white-space: pre-line;

然后页面就能成功识别 ‘\n’ 并整齐的显示结果了。

CSS white-space 属性

定义和用法 white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

让一个div 充满整个屏幕的方法

div{
position:absolute;
            top: 0;
            bottom:0;
            left:0;
            right:0;
}

隐藏div


$('.news').hide();
// <!-- 要么 -->

$('.news').css('display','none');
// <!-- 并显示div： -->

$('.news').show();
// <!-- 要么 -->

$('.news').css('display','block');

渐变

linear-gradient() (线性渐变)　　repeating-linear-gradient() (重复的线性渐变)

radial-gradient() (镜像渐变)　　repeating-radial-gradient() (重复的镜像渐变)

设置渐变色。

这四个属性，都可以作为背景图片的url 放入使用。例如 border-image: linear-gradient(); 和 background-image: linear-gradient();

linear-gradient() (线性渐变)

参数：

linear-gradient(#fff, #333); 第一个值设置从什么颜色渐变到第二个值的颜色。

linear-gradient(to bottom, #fff, #333); 第一个值是从上渐变到下。

linear-gradient(to top, #333, #fff);　　第一个值是从下渐变到上。

linear-gradient(180deg, #fff, #333);　　第一个值是角度的意思。也就是从上渐变到下，一个圆是 360deg。

linear-gradient(to bottom, #fff 0px, #333 100px); 第二个值的 0px 和第三个值的 100px 是，从第二个值的颜色，0px位置开始，渐变到第三个值的 100px位置停止。具体是怎么样的，看下面图解。也可以填 %。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        /* 铺满屏幕 */
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .app {

        height: 100%;
        width: 100%;
        min-width: 1200px;
/* 透明 */
        background-color: rgba(70, 36, 36, 0.5);
    }

    .logo {

        display: flex;
/* 上下左右居中 */
        justify-content: center;
        align-items: center;
/* 充满dom */
        height: 100%;
        min-width: 1000px;
        background: url(./11.jpeg) no-repeat;
        background-size: 100% 100%;
    }

    .lg {
        width: 532px;
        height: 400px;
        border: solid 2px black;
    }

    .lg:hover {
        opacity: 0.98;
        background-color: rgba(88, 173, 173, 0.8);
        border: none;
        transition: all 0.5s ease-in;
    }


    .logo {
        width: 50%;
        height: 50%;
        background-color: #d4c8c8;
    }

    .lg {
        width: 50%;
        height: 50%;
        background-color: #46909293;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }


    .hl {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0px;

    }

    ul>li {
        display: inline-block;
        padding: 20px;
        border: 1px double #f6f6f6;

    }

    ul>li:hover {
        /* 渐变 */
        transition: all 5s ease-in-out;
        /* background-image: linear-gradient(#e66465, #9198e5); */
        color: white;
        font-weight: bold;

        padding: 500px;
    }


    .dga {
        grid-column: 1/span 3;
        background-color: rgb(189, 101, 101);
    }


    .dgb {
        grid-row: 2/span 2;
        background-color: #f8fffa;
    }

    .dgc {
        grid-row: 2/ span 2;
        background-color: #ccffcc;
        grid-column: 2 / span 2;
        
        overflow: auto;
    }

    .sgcc {

        display: flex;
        flex-wrap: wrap;

        flex-direction: column;
    }

    .sgcc>li {
        flex: 20%;

    }

    .sgcc>li:hover {
        background-color: #966b6b;
        transform: scale(0.98);
    }
</style>

<body>


    <div class="app">
        <div class="logo">
            <div class="lg">
                <div class="dga">1</div>
                <div class="dgb">2</div>
                <div class="dgc">
                    <ul class="sgcc">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="hl">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>


</body>

</html>

透明


background-color: rgba(70, 36, 36, 0.5);

元素被撑开

响应式布局中，div 被内容撑开的解决方法

子绝父相

.clbf {
	position: relative;
}

.aaac{
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;

	overflow-y: scroll;
}

 <div class="fedin fib"> 
    <!-- flex 布局 -->
    <p class="fedileft">处理办法:</p>
    <div class="fediright clbf bbbc">
        <!-- 使用 子绝父相 来解决 -->
        <span   class="span_font aaac">
    <!-- 内容填充 -->
        </span>
    </div>
</div>

最佳CSS定义换行代码

.wrap { table-layout:fixed; word-break:break-all; overflow:hidden; }

# 弧度 圆角

# 语法

# border-radius使用

# 阴影

# 转义符 pre-line

# CSS white-space 属性

# 让一个div 充满整个屏幕的方法

# 隐藏div

# 渐变

# 透明

# 元素被撑开

# 子绝父相

# 最佳CSS定义换行代码