背景颜色：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相关文章
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台，所有文章均来自网络和网友投稿，不代表本站任何立场，请勿盲目下载注册参与，以免为您带来不必要的损失。
评论