css边框 | 易学教程

css样式的边框样、背景样式、超链接样式、列表样式

阅读更多关于 css样式的边框样、背景样式、超链接样式、列表样式

今天学习了css样式的边框样、背景样式、超链接样式、列表样式一、边框样式 1.边框的宽度 border-width 2.边框的外观（实线 solid、虚线dashed、点线dotted、边框双线double、无样式none） 3.边框颜色 border-color 4.简单写法border：1px solid red 5.局部边框样式; border-top border-bottom border-left border-right 二、背景样式 background-color 背景颜色 background-image 背景图片 background-repeat 显示方式（不平铺no-repeat、水平方向平铺repeat-x、垂直方向平铺repeat-y） background-attachment 是否随内容而滚动三、超链接样式 a:link 定义a元素未访问时的样式 a:visited 定义a元素访问后的样式 a:hover 定义鼠标经过显示的样式 a:active 定义鼠标单击激活时的样式定义这4个伪类，必须按照(link、visited、hover、active)LVHA的顺序进行，不然浏览器可能无法正常显示这4种样式四、列表样式列表项符号list-style-type 1. 有序列表语法: <ol type=""> <li>有序列表项</1i>

css中border的一些知识

阅读更多关于 css中border的一些知识

在编写页面代码时，经常会用到元素的边框括弧：border 给某个元素增加一个1px的实线黑色边框: html代码部分1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap/3.3.6/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.css"> <link rel="stylesheet" href="css/text.css"> </head> <body> <p>使用border给元素增加一个像素的黑色实线边框</p> <div class="css_2019_2_3_1 css_2019_2_3_2">元素2019_2_3_1</div> css代码部分1 .css_2019_2_3_1{ border:1px solid #000; } .css_2019_2_3_2{ height: 200px; width: 300px; margin: 20px; } 　　效果图1：

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

11.21 CSS学习-下午

阅读更多关于 11.21 CSS学习-下午

CSS框模型，看似一个盒子，封装周围的HTML元素，包括：边距、边框、填充和实际内容 Margin：清除边框区域，没有背景色，完全透明 Border：边框周围的填充和内容，边框是受到盒子的背景色影响 Padding：清除内容周围的区域，会受到框中填充的背景颜色影响 Content：盒子的内容，显示文本和图像指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，要知道，完全大小的元素，你还必须添加填充，边框和边距。 div.ex{ width: 220px; padding: 10px; border: 5px solid gray; margin: 5px; } 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距边框属性：允许指定一个元素边框的样式和颜色 border-style边框样式：指定显示什么样的边界 dotted:点线边框 dashed:虚线框 solid:实线框 double:定义两个边界框 groove:3D沟槽边界 ride:3D脊边界 inset:3D嵌入边框 outset:3D突出边框 border-width边框宽度指定宽度的两种方法：1）指定值，如1px、1em；2）使用3个关键字之一，thin,medium,thick border

css007 margin padding border

阅读更多关于 css007 margin padding border

css007 margin padding border 1、理解盒模型（盒模型：就是把一些东西，包括html各种标签都包含在一个看不见的盒子里） 1/在web浏览器中任何标签都是一个盒子，内容的周围环绕着装饰盒子的不同属性 Pad ding：内容和其框线之间的距离 Margin：一个标签和另一个标签之间的距离 Border：盒子周边的直线 Background-color：填充边框内部空间的间隔 2、用margin和padding控制空间（margin控制盒子外部和其他元素之间的空间； padding控制盒子里面内容到盒子的距离，在一般浏览器都会有默认的行距或者各种缩进距离。一般要用margin和padding清零。Margin和padding后面可以跟1到4个值，如果是两个值的话，分别代表上下和左右。一般的顺序是：上右下左（顺序一定不能搞乱了）。可以指定方向，比如margin-top） 1、margin和padding都是在内容的周围添加空间。 2、边距冲突：当margin-bottom 遇到（冲突）下面一个元素的margin-top时，浏览器是应用他们之间比较大的那个（只应用一个，不是两个相加） 3、可以用margin的负值消除不必要的空隙（margin是比较少数可以用负值的一个css属性。Padding一定要用正值） 4、行内盒子，块级盒子及其其他显示设置

css中的边框样式

阅读更多关于 css中的边框样式

在盒子模型中，盒子的边框是其重要的样式，通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线，边框的宽度及颜色来呈现。 1 ，边框线边框线指的是边框线条的样式，包括实线，虚线，点划线等。其具体的使用如下： border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset 例： div { width:300px; height:100px; border-style:solid; ｝在这里我们将一个长为 300px ，宽为 100px 的盒子设置了实线的边框，在默认的情况下边框也为实线。我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如： border-top-style 设置上边框线 border-bottom-style 设置下边框线 border-left-style 设置左边框线 border-right-style 设置右边框线 2 ，宽度设置边框的宽度可以使盒子的边框更加具有多样性，也方便了我们的观察。 border-width : medium | thin | thick | length 同边框线一样，要为一个盒子设置多个不同的边框宽度，要用到下面的语法： border-top

CSS边距---盒子模型

阅读更多关于 CSS边距---盒子模型

CSS盒子模型盒子模型主要是有margin(外边距)、border(边框)、padding(内边距)、content(内容)组成，这些属性我们可以把它转移到我们日常生活中的盒子上来理解，日常生活中所见的盒子也就是装东西的箱子，也具有这些属性，所以叫它盒子模型其中content(内容)又可以有两个元素width(宽)和height(高) CSS边框样式可以使用border-style来设置边框的样式，也可以分别来设置上下左右的样式： border-top-style border-left-style border-right-style border-bottom-style 边框样式有很多种，可以定义很多，比如单边框，虚线的边框，实线的边框，双边框，还有没有边框的边框。分别都可以用border-style属性的上下左右后面接上，下表的值值描述 none 定义无边框 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义

CSS border系列

阅读更多关于 CSS border系列

本文更新版链接一、border 关于border的3个属性，分别为border-width、border-style、border-color。其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。关于 border-color transparent，据说特定情况下有奇效，需要知道有这样一个可选值。 white，白色的dotted边框，有时候会有奇效。比如：更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。 8种 border-style ：（只有记住了，才能在需要的时候合理使用。）关于 mixed border 利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。小tips：边框模拟，等高布局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框模拟等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box {

CSS3学习之边框(Border)

阅读更多关于 CSS3学习之边框(Border)

我想，对于一个程序员来说，尤其是前端程序员，CSS并不陌生,但是CSS3是什么呢？其实CSS3和CSS...就多了个"3"而已..(废话= =||). CSS3早已经不是新鲜事物，但是学习它却用处不少. 在学习之前，我们需要知道，CSS3虽然很有趣，但是却并没有被当前浏览器完全支持.所以如果我们要在网站中使用CSS3时，最好有相应的不兼容处理. 当然，现在我们只考虑主流的5大浏览器，他们分别是IE, FireFox, Chrome, Safari, Opera. CSS3的浏览器支持状况： √ Firefox ( 3.05+…部分支持 ) √ Google Chrome ( 1.0.154+…部分支持 ) √ Google Chrome ( 2.0.156+…较好支持 ) × Internet Explorer ( IE7, IE8 不支持 ) √ Opera ( 9.6+…很少支持 ) √ Safari ( 3.2.1+ windows…较好支持 ) 我们根据需要使用，IE7，8是不支持的- -这个有点郁闷. 既然CSS3不完全支持？我们为什么要写呢？我想,当你了解到他的好处时，你也会叫好的. 从此就会感叹"原来实现圆角是这么简单","哇，还有这效果?"，咳咳，打住，继续.有什么效果后面会知道的. 今天主要学习CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下

使用CSS设置边框和背景

阅读更多关于使用CSS设置边框和背景

一、设置边框　　1、边框样式　属性说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色　　a、border-width属性　　　　自定义边框的宽度时，不能定义为百分比。　　b、border-style属性　　　　以上属性可以设置一个、二个、三个、四个属性值，当设置一个值得时候四条边框都应用该属性值，当设置两个的时候时候上下使用第一个属性值，左右使用第二个属性值，当设置三个值的时候，第一个值应用在上边框，第二个应用到左右边框，第三个属性值应用到下边框当设置了四个属性值，按着顺时针的方向一次应用。大部分情况下groove、ridge、inset、outset可以会使用双色边框，但是当border-color属性这设置成black是，两种颜色都会显示成黑色。　　 2、为一条边应用边框样式　　 boder-top/bottom/right/left-width/style/color 用来设置一条边框的样式，可以和通用属性结合使用。还可以使用border-bottom/top/left/right一次设置一条边框。　 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title

订阅 css边框