css中的背景、边框、补丁相关属性
css中的背景、边框、补丁相关属性
关于背景涉及到背景颜色与背景图片
背景颜色background-color即可设定;
背景图片background-image即可设定;
但是背景图片还涉及到其他的一些内容:
background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种;
background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比;
background-repeat用于设定背景图片是否平铺,可以是纵向的也可以是横向的;
css3新增的背景属性:
background-clip:用于设定背景图片的覆盖范围,可以设定为no-clip,content-box,padding-box,border-box;
background-origin:用于设定背景图片从哪开始覆盖,可以设定为border,padding,content;
background-size:用于设定背景图片的大小可以设定为auto,百分比,具体值;
css3新增的多背景图片:
只需要在背景图片引用时多添加几个背景图片即可,但是在引用时必须的在之间加上逗号隔开,每个图片的属性在使用时也是对 应的隔开即可;
边框相关属性:
1.可以设定border的粗细,线性,颜色,而且可以单独对每一个边框的粗细,线性,颜色进行设定,但是顺序有要求的,如果是 四个值,分别对应上、右、下、左。如果是俩值,第一个值是上下边框的,第二个值是左右边框,如果是三个值,第一个值是上 边框的,第二个值是左右边框的,第三个是下边框的;
2.可以设定边框的线型,可以是none,dotted,dashed,solid;
3.可以设定边框的风格,可以是double,groove,ridge,inset,outset;
css3提供的渐变边框:
也就是对宽度足够的边框进行颜色设定,每一个px设定一种颜色,就形成了渐变的效果了,但是苦逼得是目前只有火狐可以用;
css3提供的圆角边框:
和边框设定一样,一个值就是每一个角都是这种半径,如果是两值,第一个值对应的是左上的和右下的,如果是四个值,分别按 顺时针来对应每一个角;
css3提供的图片边框,没搞懂,再看看吧;
内外补丁的属性设定:
内补丁就是padding,可以设定上下左右每一个间隔,如果是一个值当然就是对应所有的间隔啦,如果是俩值,第一个是上下间 隔,第二个是左右间隔的,如果是四个值,就按顺时针分别对应啦;
外补丁就是margin,和padding一样的,不在赘述;
css中的背景、边框、补丁相关属性的更多相关文章
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
- CSS 关于文本 背景 边框整理
文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...
- CSS中的背景、雪碧图、超链接的伪类样式
一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...
- CSS中 Padding和Margin两个属性的详细介绍和举例说明
代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
随机推荐
- UITableViewCell
#import "ContactListTableViewController.h" #import "Contact.h" #import "Con ...
- 打造基于CentOS7的xfce最简工作环境
参考这里:http://blog.csdn.net/smstong/article/details/44802989没成功. 又参考这里http://jensd.be/125/linux/rhel/i ...
- Makefile 一点一滴(二)—— 输出文件到指定路径
先来看最简单的 makefile 文件: TestCpp : TestCpp.o g++ -o TestCpp TestCpp.o TestCpp.o : TestCpp.cpp g++ -c Tes ...
- 循序渐进redis(一) —— redis的安装及可视化工具的使用
1.安装 注意事项: 1.安装gcc 2.编译带参数: make MALLOC=libc 2.可视化客户端工具 推荐使用RedisClient,提供了基本的CRUD以及过期设置等操作的图形化接口,在项 ...
- 【转】 shell 判断语句
转自:http://see.sl088.com/wiki/Shell_%E4%B8%AD%E6%8B%AC%E5%8F%B7 test 和 [] test -z string 判定字串是否為 0 ?若 ...
- Linux代码的重用与强行卸载Linux驱动
(一)Linux代码的重用 重用=静态重用(将要重用的代码放到其他的文件的头文件中声明)+动态重用(使用另外一个Linux驱动中的资源,例如函数.变量.宏等) 1.编译是由多个文件组成的Linux驱动 ...
- 【three.js详解之一】入门篇
[three.js详解之一]入门篇 开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...
- android.app.Activity阅读摘要,有时候会不会需要保持一些现场数据呢? 想让系统帮你退出到后台或者挂掉前做些前置保持工作吗,重点参考吧:
* * @param savedInstanceState If the activity is being re-initialized after * previously being shut ...
- php大力力 [051节] 支付宝支付.申请支付资质,等待审核中
https://beecloud.cn/doc/payapply/?index=6 支付宝支付申请支付资质 一.注册支付宝用户 在支付宝官网注册成为用户 二.签约对应支付产品 应用集成支付宝支付,需要 ...
- 【搬砖】【Python数据分析】Pycharm中plot绘图不能显示出来
最近在看<Python数据分析>这本书,而自己写代码一直用的是Pycharm,在练习的时候就碰到了plot()绘图不能显示出来的问题.网上翻了一下找到知乎上一篇回答,试了一下好像不行,而且 ...