案例代码：

Html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css"></head><body><h1>CSS Color Markers</h1><div class="container"><div class="marker red"><div class="cap"></div><div class="sleeve"></div></div><div class="marker green"><div class="cap"></div><div class="sleeve"></div></div><div class="marker blue"><div class="cap"></div><div class="sleeve"></div></div></div></body>
</html>

CSS代码

h1 {text-align: center;
}.container {background-color: rgb(255, 255, 255);padding: 10px 0;
}.marker {width: 200px;height: 25px;margin: 10px auto;
}.cap {width: 60px;height: 25px;
}.sleeve {width: 110px;height: 25px;background-color: rgba(255, 255, 255, 0.5);border-left: 10px double rgba(0, 0, 0, 0.75);
}.cap, .sleeve {display: inline-block;
}.red {background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}.green {background: linear-gradient(#55680D, #71F53E, #116C31);box-shadow: 0 0 20px 0 #3B7E20CC;
}.blue {background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

效果图：

CSS颜色操作案例Demo【彩色标记笔】相关推荐

CSS文字颜色渐变 - 案例篇
(含效果图.代码)css3 文字颜色渐变 - 案例篇效果图: demo 代码如下: <doctype HTML!> <html> <head><title& ...
PhotoShop彩色图片打印机只有四中颜色操作步骤：
打印彩色图片打印机只有四中颜色操作步骤: 1.图片调成灰度模式: 2.建立色调分离模版选择4: 3.图片调整为CMYK模式: 4.调整魔棒工具: 5.用魔棒工具勾选第一个色调,建立新的图层-按住alt ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
jQuery 属性操作——案例：购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
怎么设置php的css颜色代码,CSS的文本字体颜色如何设置
这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使用RGB模式颜色网页中颜色的运用是网页必不 ...
html盒模型中border的写法,HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
Mr.J-- jQuery学习笔记(八)--CSS样式操作
CSS属性操作在jQuery中,关于元素的样式操作方法共有2种: (1)CSS属性操作: (2)CSS类名操作: 三种设置方法逐个设置 $("div").css("w ...
DOM进阶之CSS属性操作
CSS操作属性,指的是使用JavaScript来操作一个元素的CSS样式.在JavaScript中,CSS属性操作同样有两种, 获取CSS属性值设置CSS属性值 1.获取CSS属性值语法: get ...

CSS颜色操作案例Demo【彩色标记笔】

案例代码：

Html代码

CSS代码

效果图：

CSS颜色操作案例Demo【彩色标记笔】相关推荐

最新文章

热门文章