border | 易学教程

CSS3制作各种形状图像

阅读更多关于 CSS3制作各种形状图像

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框不废话直接 html界面（亲测的） ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3画图形</title> <style media="screen"> div{ text-align: center; display: inline-block; margin-left: 20px; } #circle {/*圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：*/ width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } /*设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：*/ #oval { width: 200px

CSS--border

阅读更多关于 CSS--border

1、border-width不支持百分比。 2.border-style: solid实线，dashed虚线，dotted点线；double双线；inset内凹；outset外凹；groove沟槽;ridge山脊; 3.border-color:上边距颜色右下左通常设置border-color为一种颜色，但是可以设置四种边框的颜色 width:80px;height:80px;　　border-width: 100px; border-style: solid; border-color: red green yellow blue; 变换为三角形：将下方和左边的颜色设置为透明，上方和右边设置为红色。设置为三角形图案 width: 0px; height: 0px; border-width: 80px; border-style: solid; border-color:red red transparent transparent; 设置三角卷纸动画：通过设置border上方和右方颜色为白色，下方和左边的颜色为半透明，从而达到这个效果。 box-shadow: 0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2); transition: all 0.4s ease-in; 来源： https://www

css之border

阅读更多关于 css之border

针对border进行一些分析总结，如下：一、css1中： border　　　　边框（可以写复合样式） border-style　　边框样式 border-width　　边框宽度 border-color　　边框颜色如：div{border:2px solid green;} 其中值得注意的是: 　　在border-width中除了普通的数值，还可以对应thin(1px),medium(3px),thick(4px). 　　在border-style中默认的样式是none,所以一般要设置，常用的参数有：solid,dotted,dashed,double(双线边框，可做一下按钮) 　　在border-color中也是有默认值的，在不设置的时候，它会使用当前元素的颜色做边框的颜色二、css3中： 1.border-radius属性是一个最多可指定四个border-*-radius属性的复合属性　　后面可以接数值：　　20px（四个角一样20px）　　20px 30px (左上和右下为20px,右上和左下为30px ) 　　20px 30px 40px(左上：20px 右上：30px 右下：40px 左下：30px) 　　20px 30px 40px 50px （四个角顺时针）　　也可以用border-top/bottom-left/right-radius　

盒模型

阅读更多关于盒模型

一、盒模型的概念和组成盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。 1） padding的使用方法填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白。用法： 1）用来调整子元素在父元素中的位置关系。注：padding属性需要添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。属性值的4种方式：四个值：上右下左 {padding:10px 20px 30px 40px;} 三个值：上左右下 {padding:10px 20px 30px ;} 二个值：上下左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/ 说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向pahdding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px; 3） margin的使用方法边界：margin,在元素外边的空白区域，被称为边距。 margin-left

CSS 2. 盒模型|浮动

阅读更多关于 CSS 2. 盒模型|浮动

1、盒模型盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。重要的属性： width,height,padding,border, margin 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充，内边距，壳子-边框），content（内容区域） width: 指的是内容的宽度，而不是整个盒子真实的宽度；height: 指的是内容的高度，而不是整个盒子真实的高度。做一个宽度402*402的盒子，你应该如何设计？盒模型的计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型的计算</title> <style type="text/css"> /*div{ width: 400px; height: 400px; border: 1px solid red; }*/ div{ width: 50px; height: 50px; border: 1px solid red; padding: 175px; } /*div{ width: 0; height: 0; border: 1px solid red; padding: 200px; }*/ </style> <!-- 如果想保证盒子的真实宽度

【CSS】使用盒模型

阅读更多关于【CSS】使用盒模型

盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。 1. 为元素应用内边距应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不考虑在内。下面代码展示了如何为元素应用内边距。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p { border:10px double black; background-color: lightgray; background-clip: content-box; width: 380px; padding-top: 0.5em; padding-bottom: 0.3em; padding-left: 0.8em; padding-right: 0.6em; } </style> </head> <body> <div> <p> 15岁的时候再得到那个5岁的时候热爱的布娃娃，65岁的时候终于有钱买25岁的时候热爱的那条裙子，又有什么意义。什么都可以从头再来，只有青春不能。那么多事情

HTML学习笔记5——盒模型(这里有棵圣诞树。)

阅读更多关于 HTML学习笔记5——盒模型(这里有棵圣诞树。)

盒模型：3个距离的区分　　 a: margin(外边距) 　　b: border(内边距) 　　c: padding(内边距) 一个盒子的大小：　　width==width+(margin-left+margin-right)+(border-left+border-right)+(padding-left+padding-right) 　　height==height+(margin-top+margin-bottom)+(border-top+border-bottom)+(padding-top+padding-bottom) 注：这3个距离，若只分别定义1个，则默认在盒子的四周均生效，若想指定某一个方向的设定，可加上4个方向的定义：上、右、下、左(顺时针)；一、margin：　　1.margin的普通用法：　　　　例1：margin：10px;则盒子的四周的外边距都将变成10px; 　　　　 margin：10px,10px,10px,10px; == margin:10px; 　　注：若未定义4个方向，而是2、3个方向，则默认未定义的边与其对边的值相等；　　　　 margin: 10px,20px; == margin:10px,20px,10px,20px；　　　　　 margin:10px,20px,30px; == margin:10px

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

阅读更多关于纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

1、正方形代码如下: #square { width: 100px; height: 100px; background: red; } 2、长方形 CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形代码如下: #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆代码如下: #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:

CSS3新特性,绘制常见图形

阅读更多关于 CSS3新特性,绘制常见图形

前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫伪类，两者容易混淆)，没有它画不成图形的。 a）伪元素：用来在内容元素的前后插入额外的元素，之所以叫伪元素，就是它们根本就不在文档中生成，只能在外部可见，比如：你F12时，在右边代码框中是不是可以看到？这里用到的两个伪元素 ①元素之前:before ②元素之后:after 1）圆，没必要了，我们看看三角形 /* CSS */ .sanjiao { width: 0px; height: 0px; margin: 30px auto; position: relative; border: 100px solid transparent; border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度也就是三角形的高*/ /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */ border-right: 100px solid #5E5E5E; border-top: 100px solid #3C98D1;*/ } /*

CSS3新增UI样式

阅读更多关于 CSS3新增UI样式

1、圆角：border-radius 1个：都一样 border-radius: 一样 2个：对角 border-radius: 左上&右下右上&左下 3个：斜对角 border-radius: 左上右上&左下右下 4个：全部，顺时针 border-radius: 左上右上右下左下 border-radius: 1-4个数字 / 1-4个数字——前面是水平半径，后面是垂直半径border-radius: 10px/5px; 不给“/”则水平和垂直一样 2、边框（1）边框图片：border-image border-image-sourceg 引入图片 border-image-slice 切割图片 border-image-width 边框宽度 border-image-repeat 图片的排列方式： round 平铺,repeat 重复,stretch拉伸（2）边框颜色 border-colors（火狐下） 3、线性渐变（1）格式线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…) 只能用在背景上（2）参数起点：从什么方向开始渐变默认：top left（左上角）角度：从什么角度开始渐变 xxx deg的形式（逆时针旋转）点：渐变点的颜色和位置 black 50%，位置可选（3）实例：background

订阅 border