4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> ​ <!--     边框border:左上 右上 右下 左下:顺时针方向 ​     圆圈:圆角=半径 + 边框 ​ ​     -->     <style>…
目录 一.CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色(3种表示方法) 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换 二.盒子模型 三.浮动(************) 三.溢出 四.定位 五.z-index 控制z轴 六.位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流 七.透明度 一.CSS设置标签样式 1. 给标签设置长和宽 只有块级标签才可以设置长宽 行内标签设置了没有任何作用(行内仅仅只取决于内部的文本大小…
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新.编写网页代码,这些工作都不再需要了. * 提高网页性能.由于不必再发出多余的HTTP请求,网页的载入速度将变快. * 增加视觉可靠性.某些情况下(网络拥堵.服务器出错.网速过慢等等),背景图片会下载失败,导致视觉效果不佳.CSS3就不会发生这种情况. 二.border-radius属性 CSS3圆角…
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1…
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括以及具体包括啥内容 我们先来看一个图 Content Edge => 是元素所在的内容区域,它有一个宽度和高度 Padding Edge => 内边距 Border Edge => 边框 Margin Edge => 外边距 所以,在css中,我们设置一个元素的width 和 heig…
前端三要素 HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容. CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式. JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页行为. 表现层(CSS) CSS层叠样式表是一门标记语言,并不是编程语言.因此不可以自定义变量,不可以引用等,.换句话说就是不具备任何语法支持,它主要缺陷如下: 语法不…
css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时,则为正圆 单独设置每个圆角: 四个值: border-radius:左上角 右上角 右下角 左下角 三个值: border-radius:左上角 右上角+左下角  右下角  两个值: border-radius:左上角+右下角  右上角+左下角 兼容浏览器前缀 谷歌 -webkit- 火狐 -moz…
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先来了解CSS的三大特点,以便于我们下面知识点的讲解 CSS三大特性包括: 层叠性 继承性 优先级 层叠性 当相同的选择器设置相同的样式,却含有不同的样式值时,此时一个样式就会覆盖掉另一个冲突的样式,层叠性就是为了解决这个问题 层叠性原理: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个…
如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> <title>灵活的背景定位2</title> <style type="text/css"> div{ max-width: 10em; border-radius: .8em; padding: 1em; margin: 1em; background: t…
当初学习前端的时候,属于快速入门那种,没有好好深入学习html和css.如今,在空闲时间重新拿起基础书学习,都会写到一些新的知识. 1.css实现圆角.渐变功能.使用border-radius以及linear-gradient属性. <!DOCTYPE html><html><head> <style type="text/css"> a{ height: 40px; line-height: 40px; color:#fff; text…