border虚线 | 易学教程

css盒子模型

阅读更多关于 css盒子模型

盒子模型　　盒子模型就是把HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装盒子的容器，每个矩形都是由元素的内容、内边距（padding）、边距（border）和外边距（margin）组成。 <div>标记　　 div是英文 division 的缩写，意为“分割、区域”。<div>是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。大多数 HTML 标签都可以嵌套在 <div> 中，<div> 中还可以嵌套多层<div>。盒子的宽与高边框属性设置内容样式属性常用属性边框样式 border-style:上边[右边下边左边]; none 无（默认）、solid 单实线、dashed 虚线、dotted 点线、double 双实线边框宽度 border-width:上边[右边下边左边]; 像素值边框颜色 border-color:上边[右边下边左边]; 颜色值、#十六进制、rgb(r%,g%,b%) 综合设置边框 border:四边宽度四边样式四边颜色圆角边框 border-radius:水平半径参数/垂直半径参数；像素值或百分比图片边框 border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式; 1.边框样式（border-style）　　其基本语法格式：border-style

盒子模型基础属性

阅读更多关于盒子模型基础属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型</title>  <style> #box10{ width: 100px; height: 200px; background-color: blueviolet; /*border:dashed 10px red ;*/ border:solid 10px red ; /*border:dashed 10px red ;*/ /*border:dotted 10px red ;*/ /*盒子模型内容*/ /*overflow: hidden;!* 内容被剪切，其余内容不可见*!*/ /*overflow: visible;!*内容不被裁剪，会呈现在元素框以外*!*/ /*overflow: scroll;!*内容被剪切，流动条显示其余内容*!*/ /*overflow: auto;!* 如果内容被剪裁则浏览器以流动条显示其他内容*!*/ /*overflow-x:scroll;*/ /*overflow-y:scroll;*/ /*text-overflow: clip;!*修改文本*!*/ /*text-overflow:

常用CSS标签1——属性

阅读更多关于常用CSS标签1——属性

一、属性 1、字体 font 1）font: font-style; font-variant; font-weight; font-size; font-height; font-family. 2) color: 指定颜色，写法：十六进制值（或者简写）； rgb（）函数； css承认的颜色名。 3）font-family: 在后面直接输入名字，如果有英文，尽量用引号引起来。 4）font-face(导入外部字体) @font-face{ font-family src:url("url"); } 必须记住导入外部字体后，要进行引用。 5）font-size: A、absolute-size 绝对大小： xx-small; x-small; small; medium; large; x-large; xx-large. B、 relative-size 相对大小： larger; smaller. C、length 长度：常以px为选项。 D、百分比：其百分比取值是基于父对象中字体的尺寸。 6）font-style (字体的样式)： normal(正常); italic和oblique（斜体）. 7）font-weight(字重): normal(正常=400); bold(加粗=700); bolder(特粗，只在IE5中可行); lighter(细体，

CSS样式表

阅读更多关于 CSS样式表

使用CSS样式的方式 HTML <!DOCTYPE>声明标签（H5声明标签）（1）内链样式表：<body style="background-color:green; margin:0; padding:0"></body> （2）嵌入式样式表：<style type="text/css"></style>（需要将样式放在<head></head>）（3）引入式样式表：<link rel="StyleSheet" type="text/css" href="style.css">（需要将样式放在<head></head>）定义样式表 HTML标记定义 <p>...</p> p{属性：属性值；属性1：属性值1} 一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加; Class定义<p class="p">...</p> class定义是以"."开始如.p{属性：属性值；属性1：属性值1} ID定义<p id="p">...</p> ID定义是“#”开始的，如#p{属性：属性值；属性1：属性值1} 优先级问题（1）ID>Class>HTML （2）同级时选择离元素最近的一个，如 #p{color:red} 　　　#p{color:#f60} 执行颜色为#f60 组合选择器（同时控制多个元素）如，h1,h2,h3{font-size

border-style

阅读更多关于 border-style

none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。来源： https://www.cnblogs.com/500m/p/10545835.html

CSS盒模型

阅读更多关于 CSS盒模型

目录元素分类元素分类--块级元素元素分类--内联元素元素分类--内联块状元素盒模型--边框（一）盒模型--边框（二）盒模型--宽度和高度盒模型--填充盒模型--边界元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素) 和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素a 转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

CSS盒模型

阅读更多关于 CSS盒模型

元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素) 和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素a 转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。元素分类--内联元素在html中，<span>、<a>、<label>、<input>、 <strong> 和

CSS盒模型

阅读更多关于 CSS盒模型

1.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 2.元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） b、元素的高度、宽度、行高以及顶和底边距都可设置。 c、元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。 3.元素分类--内联元素在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）

CSS代码

阅读更多关于 CSS代码

border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/ 来源： https://www.cnblogs.com/yazixun/archive/2011/11/30/2268659.html

css之属性部分

阅读更多关于 css之属性部分

这篇写的是今天的学习到的属性，一共20个。属性再多，但也要会使用，会在使用时可以记起它，才能起到它为我们所需要的作用。样式属性 1、border CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式border-style 属性用来定义边框的样式 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。效果取决于边界的颜色值例子： border-style: solid; 边框宽度 border-width border-width:5px; 边框颜色border-color 可以设置的颜色： name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。注意： border-color单独使用是不起作用的，必须得先使用border

订阅 border虚线