css随记01编辑技巧,背景与边框
代码优化
一个按钮的例子,使其值同比例变化;
button{color: white;background: #58a linear-gradient(#77a0bb, #58a);padding: 6px 16px;border-radius: 4px;//由padding+content构成,分别扩展border: 1px solid #446d88;font-size: 20px;line-height: 30px;//shadow: insert <x/y> <blur> <spread> <color>box-shadow: 0 1px 5px gray;text-shadow: 0 -1px 1px #335166;
}
- 让
line-height
随着font-size
自动变化; - 让
font-size
随着其继承的font-size
变化而自动变化;
font-size: 125%; /* Assuming a 16px parent font size */line-height: 1.5;
- 对于大多扩展的值,设置单位
em
,使其随着font-size
等比变化 - 同时注意一些固定的值,仍使用
px
固定;
text-shadow: 0 -.05em .05em #335166;padding: .3em .8em;
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
text-shadow: 0 -.05em .05em #335166;
- 按钮上设置了多种颜色,之后要修改或重用会变的比较麻烦;
- 为了使颜色更容易变化,把
linear-gradient
一种渐变色设置为背景同色,即transparent
或者hsla(0,0%,100%,0)
; - 将阴影颜色统一为
rgba(0,0,0,.5);
background: #58a linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,0));box-shadow: 0 .05em .25em rgba(0,0,0,.5);
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
- 重用这个按钮时,只要重新设置
background-color
;
一个缩写的例子
border-width: 10px 10px 10px 0;
- 有时候完全的缩写也不一定正确,对于只有单一值的改变更适用形式:
border-width: 10px;
border-left-width: 0;
不要忘记使用继承
ingerit
对于自适应设计的一些建议
- 尽量使用百分比,如果不行的化使用
viewport-relative units
; - 当设置固定数值的话,如宽度
,设置
max-width取代
width`; - 不要忘了给替代元素,如
img, object, video, and iframe.
设置百分值的max-width
; - 设置背景图时常添加
background-size: cover
使图片完全覆盖,但注意对移动设备带宽考虑,并不一定要完全显示整个大图;
背景和边框
制作半透明边框
- 颜色设置使用模糊效果的值
hsl-> hsla, rgb-> rgba
; - 例子;
div {border: 10px solid hsla(0,0%,100%,.5);background: white;//默认是border-box,背景包括边框的模式;background-clip: padding-box;
}
制作多边外框
- 使用
box-shadow
,它可以设置多值,也受border-radius
影响; - 注意多值的宽度都是重复叠加的,需要叠加计算;
- 注意由于不是真正的边框,会与周边元素叠加,需要额外设置
margin/padding
,决定于阴影是否是insert
;同时注意margin
也是会叠加的; - 注意他不能绑定一些事件,如果很重要,请设置为
insert
形式; - 例子
div {background: yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
}
- 使用
outline
,它不能设置多值,也不受border-radius
影响; - 也需要
margin
设置,只能out
形式; - 可以额外设置
outline-offset
;
div {background: yellowgreen;border: 10px solid #655;outline: 15px solid deeppink;
}
更好的设置背景图片位置
- 先用
background
总缩写大致确定图片状态与位置;再设置background-position
做具体的调整;
background: url(http://csssecrets.io/images/code-pirate.svg)no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
- 默认的布局下,
background-position
是基于padding-box
; - 对于移位值相同情况下,修改
background-origin
,使用padding
替代; - 例子
padding: 10px;
background: url("code-pirate.svg") no-repeat #58abottom right; /* or 100% 100% */
background-origin: content-box;
- 使用
calc()
计算横纵坐标位移,它可以混合百分比和具体值计算; - 例子
- 还可以用来剧中位置;
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
设置内部弧度外部直边的方框
- 可以同时设置
border-radius
和outline
来呈现基本样式; - 此时他们之间会产生空白部分,利用
box-shadow
填补; - 取
border-radius
长度为r
,outline
长度为l
,填补的长度范围应该在(1.414 - 1)r ~l
之间; - 例子
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
设置条纹背景
- 使用线性渐变
linear-gradient
并将值一渐变开始位置比例设为50%;渐变比例为from
到to
的位置比,第一值to
,第二值为from
; - 默认是
repeat
的,再设置background-size
宽度和高度; - 例子
background: linear-gradient(#fb3 50%, #58a 0); //#fb3到.5位置结束,#58a从0位置开始;
background-size: 100% 30px;
liner-gradient
可以设置多值,两个为一对to,form
后者会覆盖前者;
//设置三种颜色
background: linear-gradient(green 33.3%, red 0, red 66.6%, yellow 0);
改变
linear-gradient
的方向,设置to left|right|top|bottom
或Ndeg
的参数;竖条纹的例子
background: linear-gradient(to right, /* or 90deg */#fb3 50%, #58a 0);
对于设置特定角度,如斜条纹,就只能设置
Ndeg
;同时设置background-size
宽高相同;例子1, 例子2
更复杂的背影样式
- css3, css3
- svg
设置边框图片背景
- 简单的方法利用两个
div
构建一个虚拟的图片边框;
.something-meaningful {background: url(stone-art.jpg);background-size: cover;padding: 1em;
}
.something-meaningful > div {background: white;padding: 1em;
}
- 在一个
div
设置两个背景层,渐变层和图片背景;用background-clip
分别设置剪裁范围; - 设置图片背景的范围;
- 例子
background: linear-gradient(white, white),url(http://csssecrets.io/images/stone-art.jpg);
background-clip: padding-box, border-box;
background-size: cover;
background-origin: border-box;
- 使用
border-image
: 例子 - 其他一些设置例子: 例子 例子
- 一个上边框显示部分的例子: 利用渐变的变化实现, 例子
转载于:https://www.cnblogs.com/jinkspeng/p/4875422.html
css随记01编辑技巧,背景与边框相关推荐
- css揭秘实战技巧- 背景与边框 [一]
前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
- CSS基础--颜色、字体、背景、边框等
学习目标: 掌握 CSS 颜色,单位,注释等基本元素的使用方法 学习内容: CSS基础 1.颜色 指定颜色是通过使用预定义的颜色名称,或 RGB.HEX.HSL.RGBA.HSLA 值. 2.单位 C ...
- CSS入门六、常用技巧
零.文章目录 CSS入门六.常用技巧 1.精灵图 (1)为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大 ...
- dw中怎么在html中加css,在Dreamweaver中编辑CSS规则的步骤
在前文中我们学会了怎么设置h1标签的属性,如果我们认为某一属性设置不合理需要修改,该怎么操作呢?在Dreamweaver CS6有3种方式可以实现CSS规则的编辑. (1)在代码区域内直接进行CSS代 ...
- 设计师必看!10个非常重要的图片无损编辑技巧
@南辰_designer 图片处理无需大量的图层.如果使用合适的智能对象甚至可以将图片的处理优化在15个图层内.那么现在,让我们一起来学习一下处理图片常用的10个技巧. 1. 将图层转化为智能对象 智 ...
- css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
- CSS进阶(一)背景与边框
CSS进阶(一)背景与边框 文章目录 CSS进阶(一)背景与边框 一.浏览器前缀 二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
- word长篇文档编辑技巧
以下内容是应某杂志编辑要求所写.主要是word长篇文档的编辑技巧. 可以利用在论文.计划.总结等方面. 一.版面规划: 当我们要作一篇毕业设计时,要先对版面进行规划,比如页边距留多少,在上面装订还是在 ...
- 干货丨拿好这几个实用PR编辑技巧(一)
PR作为一款易学.高效.精确的视频剪辑软件,基本可以满足创建高质量作品的要求,很多小伙伴在学习和使用PR的过程中,或多或少会遇到一些问题,小编就在这里给大家提供几个实用的PR编辑技巧: 技巧一 在给一 ...
最新文章
- neo4j中文社区 php,neo4j 社区版搭建教程
- tomcat的jsp页面超过65535,导致500报错
- 《Python编程快速上手——让繁琐工作自动化》——第一部分 Python编程基础 第1章 Python基础 1.1 在交互式环境中输入表达式...
- ARM 之四 各集成开发环境(IDE)说明(Keil、RVDS、ADS、DS-5、MDK)
- ant design表格添加loading效果
- IOS中的AFNetworking框架的GET参数的使用
- 数学图形(1.35)Kappa curve
- 视频人脸检测——Dlib版(六)
- Linux工作笔记-ssh中-X属性的使用(Linux传界面)
- 云服务器工具大全,云服务器主要的登陆方法有哪些
- 使用Windows自带的录音机进行wav转mp3的操作
- 爬取人民日报_抓取人民日报
- pandas数据清洗策略1
- iOS中分类(category)和类扩展(Extension)的区别
- mini2440硬件篇之Nand Flash
- 谈一谈|Word文档图片的提取
- ArcGIS学习网站
- pytest接口自动化测试框架 | 用python代码测试接口
- C语言中的strlen与sizeof的区别
- 数学之美:GOOGLE新闻归类算法与余弦定理
热门文章
- 【网络安全工程师面试合集】安全角度谈UDP、TCP和DHCP协议
- linux_从windows到ubuntu再到manjaro
- 如何用敏捷搞垮一个IT团队?
- 数据分析汇报用这个神器,让他们弃用了Excel和PPT
- think php getfield,thinkPHP数据查询常用方法总结【select,find,getField,query】
- 基于tcp的协议需要设计数据校验码吗_C#与宇电温控表自定义协议通信实例
- Php获取分类等级,PHP获取无限分类的完整等级列表
- 石河子大学计算机类学什么,石河子大学有哪些专业好,2021年石河子大学各专业排名...
- python的pyaudio教程入门_『开发技巧』Python音频操作工具PyAudio上手教程
- TraPHic: Trajectory Prediction in Dense and Heterogeneous Traffic Using Weighted Interactions