网站制作教程:CSS 颜色代码示例

你的网络首码项目网 网站建设来源:你的网络首码项目网评论45字数 3025阅读模式

背景颜色:background-color

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        background-color: gold;
        font-size: 5vw;
        padding: 10vw;
        margin: 5vw;
        border: solid;
    }
</style>

<div class="box">价格是你付出的代价。价值就是你所得到的。</div>

文本颜色:text-color

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        color: orange;
        font-size: 5vw;
        padding: 10vw;
        margin: 5vw;
        border-style: solid;
    }
</style>

<div class="box">价格是你付出的。价值就是你得到的。</div>

<p>请注意,如果边框的颜色尚未明确设置,则使用文本颜色。</p>

边框颜色:border-color

<!DOCTYPE html>
<title>My Example</title>
<style>
    div {
        color: darkorange;
        font-size: 3vw;
        padding: 3vw;
        margin: 3vw;
        border-style: solid;
    }
    .a {
        border-color: limegreen;
    }
    .b {
        border-color: navy yellowgreen tomato silver;
    }
    .c {
        border: 5px dotted gold;
    }
</style>

<div>默认颜色。如果边框的颜色尚未明确设置,则使用<code>当前颜色</code> (the value of the <code>color</code> property).</div>

<div class="a">此框的边框颜色已明确设置。</div>

<div class="b">这个盒子的每一面都设置了不同的颜色。</div>

<div class="c">此框的边框属性已使用 <code>边界</code> 速记属性。</div>

插入记号颜色:caret-color

<!DOCTYPE html>
<title>Example</title>	
<style>
    input {
        caret-color: orange;
        color: white;
        background: black;
        font-size: 7vw;
        padding: 3vw;
}
</style>

<input autofocus placeholder="Name">

列规则颜色:column-rule-color

<!doctype html>
<title>Example</title>
<style>
.example {
    background: lemonchiffon;
    padding: 1em;
    font-size: 3.5vw;
    column-count: 3; 
    column-rule-width: 1vw;
    column-rule-style: solid;
    column-rule-color: limegreen;
}
</style>

<div class="example">
    <h3>列规则颜色示例</h3>
    <p>CSS列规则颜色属性允许您在多列布局的列之间设置列规则的颜色。</p>
    <p>列规则显示为多列布局中列之间的一种边框。您可以使用列规则速记属性来获得相同的结果。</p>
    <p>尝试更改这些值以查看其对本示例的影响。</p>
</div>

轮廓颜色:outline-color

<!DOCTYPE html>
<title>My Example</title>
<style>
    div {
        color: darkorange;
        font-size: 3vw;
        padding: 3vw;
        margin: 3vw;
        border: thin solid black;
        outline-style: solid;
        outline-width: thick;
    }
    .a {
        outline-color: limegreen;
    }
    .b {
        outline: 5px dotted gold;
    }
</style>

<div>尝试更改值默认颜色。如果轮廓的颜色尚未明确设置,则使用s查看它对本例的影响。<code>currentColor</code> (的值 <code>color</code> 属性).</div>

<div class="a">此框的轮廓颜色已明确设置。</div>

<div class="b">此框的大纲属性已使用 <code>outline</code> 速记属性.</div>

文字装饰颜色:text-decoration-color

<!DOCTYPE html>
<title>My Example</title>
<style>
    p {
        font-size: 5vw;
        text-decoration: overline;
        text-decoration-color: orange;
    }
</style>

<p>价格是你付出的代价。价值就是你所得到的。</p>

文本阴影颜色:text-shadow_color

<!DOCTYPE html>
<title>My Example</title>
<style>
    p {
        text-shadow: 1px 1px 10px green;
        color: white;
        font-size: 8vw;
    }
</style>

<p>一些随机文本来演示效果。</p>

过滤器:filter

<!DOCTYPE html>
<title>My Example</title>
<style>
    div {
      	color: red;
        background-color: gold;
        font-size: 4vw;
        padding: 2vw;
        margin: 2vw;
        border: solid;
    }
    .contrast {
        filter: contrast(100);
    }
    .brightness {
        filter: brightness(50%);
    }
    .inverted {
        filter: invert(100%);
    }
    .rotated {
        filter: hue-rotate(200deg);
    }
    .grayscale {
        filter: grayscale();
    }
</style>

<div>价格是你付出的代价。价值就是你所得到的。</div>
<div class="contrast">价格是你付出的代价。价值就是你所得到的。</div>
<div class="brightness">价格是你付出的代价。价值就是你所得到的。</div>
<div class="inverted">价格是你付出的代价。价值就是你所得到的。</div>
<div class="rotated">价格是你付出的代价。价值就是你所得到的。</div>
<div class="grayscale">价格是你付出的代价。价值就是你所得到的。</div>

不透明度/透明度:opacity

<!DOCTYPE html>
<title>My Example</title>
<style>
    body {
        background-image: url('/pix/samples/bg2.png');
    }
    .box {
        opacity: .5;
        background-color: orange;
        font-size: 5vw;
        padding: 10vw;
        margin: 5vw;
        border: solid;
    }
</style>

<div class="box">这个盒子是半透明的。</div>
文章源自你的网络首码项目网-https://www.youranweb.com/272.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论