box-shadow做出一条线两种颜色
今天同事问我一个问题,说下图的效果是怎么实现的
我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把。
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是
值 | 描述 | |
---|---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 | |
v-shadow | 必需。垂直阴影的位置。允许负值。 | |
blur | 可选。模糊距离。 | |
spread | 可选。阴影的尺寸。 | |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
注意我把前两个必需属性里面有个允许负值都标成了红色,这是关键。
好了,科普完成,上手后发现正常给值的话线一直会有两边阴影,这样的话是达不到上图的效果的,我们要的是单边的阴影效果。
<style type="text/css">
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: -2px red;
}
.right {
box-shadow: 2px green;
}
.bottom {
box-shadow: 2px blue;
}
.left {
box-shadow: -2px orange;
}
style>
<div class="box-shadow top">div>
<div class="box-shadow right">div>
<div class="box-shadow bottom">div>
<div class="box-shadow left">div>
效果如下图:
最后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.border{
height: 200px;
border-left : 1px solid red;
box-shadow: -1px black;
}
</style>
<body>
<div class="border"></div>
</body>
</html>
box-shadow做出一条线两种颜色的更多相关文章
- Html+Css+Js_之table每隔3行显示不同的两种颜色
<html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...
- Android TextView里显示两种颜色
今天介绍一个小技巧,在Android的TextView里设置两种颜色,直接上代码: TextView TV = (TextView)findViewById(R.id.mytextview01); S ...
- 一个label两种颜色,一个label两种字体
-(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...
- Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- three.js 显示一条线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS渐变的两种基本用法
1.线性渐变(linear-gradient) 基础用法:background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释 ...
- mysql批量更新的两种方式效率试验<二>
Mysql两种批量更新的对比 简介: mysql搭载mybits框架批量更新有两种方式,一种是在xml中循环整个update语句,中间以‘:’隔开,还有一种是使用case when 变相实现批量更新, ...
- mybatis批量保存的两种方式(高效插入)
知识点:mybatis中,批量保存的两种方式 1.使用mybatis foreach标签 2.mybatis ExecutorType.BATCH 参考博客:https://www.jb51.net/ ...
随机推荐
- flutter中使用webview
首先要安装一个插件:flutter_webview_plugin dependencies: flutter_webview_plugin: ^0.2.1+2 使用方法: new MaterialAp ...
- 【题解】Luogu P2472 [SCOI2007]蜥蜴
原题传送门 题目要求无法逃离的最少有多少 直接做肯定不好做,我们帮题目变一个说法:最多能逃离多少 这个询问一看就是最大流 考虑如何建图: 1.将S和每一个有蜥蜴的点连一条流量为1的边(每个蜥蜴只能用1 ...
- [c/c++] programming之路(22)、字符串(三)——字符串封装
项目结构 头文件.h #include<stdio.h> #include<stdlib.h> #include<string.h> //字符串封装,需要库函数 / ...
- Ingenious Lottery Tickets 【排序】
问题 I: Ingenious Lottery Tickets 时间限制: 1 Sec 内存限制: 128 MB 提交: 590 解决: 135 [提交] [状态] [命题人:admin] 题目描 ...
- 同事在使用shiro后遇到的异常
一切配置按照demo来的,给他讲了一遍捋顺了.然后之前他做的demohim按照他网络摘抄的shiro博客看的. 然后注册了,正常,登录,提示密码不匹配. 问题出在注册的密码加密次数是2, 而shiro ...
- Unity3D获取系统当前时间,并格式化显示
Unity 获取系统当前时间,并格式化显示.通过“System.DateTime”获取系统当前的时间,然后通过格式化把获得的时间格式化显示出来,具体如下: 1.打开Unity,新建一个空工程,Unit ...
- 【Entity Framework】Revert the database to specified migration.
本文涉及的相关问题,如果你的问题或需求有与下面所述相似之处,请阅读本文 [Entity Framework] Revert the database to specified migration. [ ...
- Lintcode12-Min Stack-Easy
2. Min Stack Implement a stack with following functions: push(val) push val into the stack pop() pop ...
- 不错的redis文章
参考: https://www.cnblogs.com/itdragon/tag/redis/
- js同步、异步、回调的执行顺序以及闭包的理解
首先,记住同步第一.异步第二.回调最末的口诀 公式表达:同步=>异步=>回调 看一道经典的面试题: for (var i = 0; i < 5; i++) { setTimeout( ...