css 积累1
1.position
取值。
通常的回答是 static
、relative
、absolute
和 fixed
。当然,还有一个极少人了解的 sticky
。其实,除此之外, CSS 属性通常还可以设置下面几个值:
initial
inherit
unset
revert
题目1、下面这个图形,只使用一个标签,可以有多少种实现方式:
假设我们的单标签是一个 div
:
1
|
< div ></ div > |
定义如下通用CSS
:
1
2
3
4
5
6
|
div{ position : relative ; width : 200px ; height : 60px ; background : #ddd ; } |
法一:border
这个应该是最最最容易想到的了
1
2
3
|
div{ border-left : 5px solid deeppink; } |
法二:使用伪元素
一个标签,算上 before
与 after
伪元素,其实算是有三个标签,这也是很多单标签作图的基础,本题中,使用伪元素可以轻易完成。
1
2
3
4
5
6
7
8
9
|
div::after{ content : "" ; width : 5px ; height : 60px ; position : absolute ; top : 0 ; left : 0 ; background :deeppink; } |
法三:外 box-shadow
盒阴影 box-shadow
大部分人都只是用了生成阴影,其实阴影可以有多重阴影、单侧阴影、阴影不可以不虚化,这就需要去了解一下 box-shaodw
的每一个参数具体作用。使用 box-shaodw
解题
1
2
3
|
div{ box-shadow: -5px 0px 0 0 deeppink; } |
法四:内 box-shadow
盒阴影还有一个参数 inset
,用于设置内阴影,也可以完成:
1
2
3
|
div{ box-shadow: inset 5px 0px 0 0 deeppink; } |
法五:drop-shadow
drop-shadow
是 CSS3 新增滤镜 filter
中的其中一个滤镜,也可以生成阴影,不过它的数值参数个数只有 3 个,比之 box-shadow 少一个。
1
2
3
|
div{ filter:drop-shadow( -5px 0 0 deeppink); } |
法六:渐变 linearGradient
灵活使用 CSS3 的渐变可以完成大量想不到的图形,CSS3 的渐变简单而言分为线性渐变和径向渐变,本题使用线性渐变,可以轻易解题:
1
2
3
|
div{ background-image :linear-gradient( 90 deg, deeppink 0px , deeppink 5px , transparent 5px ); } |
其实,CSS3 渐变远不止线性渐变和径向渐变,细分下来,还有重复线性渐变(
repeating-linear-gradient
)和重复径向渐变(repeating-radial-gradient
)以及已经被最新版本 Chrome 支持的圆锥渐变(conical-gradient),感兴趣可以自行去学习一下。
法七:轮廓 outline
这个用的比较少,outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。这个方法算是下下之选。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
div{ height : 50px ; outline : 5px solid deeppink; } div::after{ position : absolute ; content : "" ; top : -5px ; bottom : -5px ; right : -5px ; left : 0 ; background : #ddd ; } |
法八、滚动条
这个方法由 小火柴的蓝色理想 提供,通过改变滚动条样式实现:
1
2
3
4
5
6
7
8
9
|
div{ width : 205px ; background :deeppink; overflow-y: scroll ; } div::-webkit-scrollbar{ width : 200px ; background-color : #ddd ; } |
css 积累1的更多相关文章
- css 积累
1.input 初始化 input { -webkit-tap-highlight-color: rgba(0,0,0,0); border: none; } input:focus { outlin ...
- css积累
1. 图片底部3像素的问题解决方案 display: inline-block; vertical-align: bottom;
- CSS 总结
CSS 积累总结 1. ::Selection 选择器 使被选中的文本成为灰色: ::selection { color:#CCC; background:red; --- 选中背景颜色变成红色 } ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 项目积累(三)CSS
公司不是专门做网站的,偶尔会接到客户让修改前端,有时候和让头疼,自己浏览器兼容问题处理不好. 慢慢积累吧. 先贴出来一些前端代码吧,如下: <div class="test" ...
- css进阶 06-CSS开发积累
06-CSS开发积累 #让flex盒子中的子元素们,居中 flex布局常用的三行代码: display: flex; justify-content: center; // 子元素在横轴的对齐方式 ( ...
- (一)css代码积累——自己经常忘记,但是总记不住的代码
1.透明度设置 90%透明:filter:alpha(opacity=90);-moz-opacity:0.90;-khtml-opacity: 0.90;opacity: 0.90; 80%透明:f ...
- css知识点积累
关于样式的优先级问题: !important > style > [ id > class > tag ]; z-index 的属性用法: z-index属性是用来设置元素的 ...
- 项目积累——CSS应用
<tr onmouseover=" this.style.backgroundColor= '#E0FFFF' " onmouseout="this.style. ...
随机推荐
- 牛客网——E进阶吧阶乘
链接:https://www.nowcoder.net/acm/contest/75/E来源:牛客网 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 32768K,其他语言65536K ...
- jackson springboot null节点忽略配置
spring: jackson: date-format: yyyy-MM-dd HH:mm:ss default-property-inclusion: non_null spring.jackso ...
- notepad++支持自定义文件类型
场景描述: 使用notepad++编辑less.ejs文件,发现高亮和提示均无效,修改如此需要进行额外的设置: 解决方法: 以less为例, 1.设置 >语言格式设置 >语言里找到CSS, ...
- c primer plus 5 读书笔记1
C语言是一种融合了控制特性的语言,是一种快速.高效.紧凑.可移植性的语言. 使用C语言的7个步骤:定义程序目标.设计程序.编写代码.编译程序.运行程序.测试和调试程序.维护和修改程序. c程序是由一个 ...
- Class.getResource()方法的使用
我们之前使用路径总是有点不知道怎么用,发现别人使用Class.getResource()方法,好像挺不错的样子.于是看看博客,简单学习下. 参考链接:http://blog.csdn.net/lcj8 ...
- C/C++函数中使用可变参数
先说明可变参数是什么,先回顾一下C++里面的函数重载,如果重复给出如下声明: int func(); int func(int); int func(float); int func(int, int ...
- 使用Junit进行Java单元测试
1.新建一个Number类,该类中包含两个函数,求和.求差 2.在eclipse上安装Junit 右键test工程,选择“Properties”→“Java Build Path”→“Librarie ...
- SVM大致思路整理
(一)线性可分 我们忽略建立目标函数的过程,直接写出目标函数. 原问题: 首先,我们得到了目标函数: 这是一个凸优化问题,直接可以用软件可以求解: 对偶问题: 原问题根据一系列的变换,可写成: 满足某 ...
- Brackets编辑器使用
常用快捷操作 Ctrl + b 当选中一个文本时,离该文本最近的相同的文本会被高亮显示,这样,相同的2个文本就全部获得了焦点,可以同时更改高亮文本.(对,只会找寻最近的且只找到一个就不找了!惰性查找. ...
- elasticsearch安装入门
简介Elasticsearch是一个高度可扩展的开源的分布式Restful全文搜索和分析引擎. 它允许用户快速的( 近实时的) 存储. 搜索和分析海量数据. 它通常用作底层引擎技术, 为具有复杂搜索功 ...