CSS MASTERY Chapter 4 概要及感想
来源:互联网 发布:在职研修班网络班 编辑:程序博客网 时间:2024/05/21 03:59
background-position
两个值分别是距离元素左边界、右边界;注意百分数和数值的定位区别。
百分数值是元素的定位点与背景图片的定位点对齐。
background简写顺序: 颜色 图片 重复 位置1 位置2- 应用:创建项目符号
圆角框
可以用CSS3属性、设置背景图像及repeat方式- 设置最顶和最底的背景图像,分别是上面的两个圆角、下面的两个圆角
- 水平扩展的圆角框 sliding doors technique
因为有四个包含圆角的图片,因此总共需要四个嵌套的元素,因此可以创建出宽度可以变化的盒子
山顶角
- 应用:创建蒙版盖住背景色
- CSS3可以在background设置中多个图像多个属性
- 或者是创建多个wrapper分别设置它们的background-image
- border-radius Firefox、Safari兼容
- border-image 将一个图像分成九个部分
-webkit-border-image: url() 25% 25% 25% 25% / 边框宽度 重复方式(repeat、stretch、round)
- 应用:创建蒙版盖住背景色
投影
- 设置wrapper的背景,再将内部元素进行左上方偏移(使用负margin或者相对定位)
- CSS3 box-shadow 垂直偏移 水平偏移 模糊半径 颜色
- 不透明度
- opacity 有继承性,会使文本等其他子元素也半透明
- IE 专用: filter: alpha(opacity=80);
- RGBa 设置background-color
- png图像在IE6及以下使用AlphaImageLoader(为防止css失效,放在条件注释代码中)
- css视差效果
通过百分比设置background-position ,然后在增大屏幕宽度的时候,多个background-image的开始重复位置的增加速度不一样。 - 图像替换文本
对需要隐藏的部分设置很大的负值text-indent
阅读全文
0 0
- CSS MASTERY Chapter 4 概要及感想
- 《CSS Mastery》Chapter 2
- CSS Mastery Chpater 5 概要
- 《CSS Mastery》 Chapter 1 问题解决
- CSS Mastery Chapter 6 需要学习的点
- CSS Mastery
- CSS Mastery摘要(4)--Beautiful Boxes
- HTML及CSS学习感想
- CSS Mastery: Advanced Web Standards Solutions
- 《CSS Mastery Advance Web Standards Solutions》
- CSS Mastery摘要(3)--Web Typography
- CSS Mastery摘要(5)--Content Layout
- CSS概要
- CSS Mastery摘要(7)--Responsive Web Design & CSS
- CSS Mastery摘要(2)--Visual Formatting Model Overview
- CSS Mastery摘要(6)--Page Layout and Grids
- CSS Mastery摘要(8)--Styling Forms and Data Tables
- div+css 学习概要
- 常见字符编码的区别和关系
- 基础补习—概率—台大叶柄成(第二周)
- 数据结构-链表 (python)
- 【神经网络与深度学习】迁移学习:经典算法解析
- 【STM32】stm32安装与搭建环境
- CSS MASTERY Chapter 4 概要及感想
- Ubuntu安装go1.8
- 2017.11.08最新PLA1.2/PLA5.2.1被拒,官方审核人员解决方案
- TCP三次握手和四次握手
- CAN总线基础(二)——CAN总线物理层介绍(总线电压详解)
- Ubuntu中使用apt-get安装LAMP
- 大数据经典学习路线
- 错误 -5
- Ubuntu16 apt 安装mysql5.7