css边框 | 易学教程

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

移动端边框1像素的问题

阅读更多关于移动端边框1像素的问题

前两天设计说我移动端为什么边框看起来像2px。我代码检查了大半天，是1px啊。仔细比对了很久，不得不承认，设计的眼睛比我的眼睛好太多太多了。造成这个的原因是手机分辨率的问题。原理都在代码里了。也不多说。下面这个代码重点是css的代码，html全部代码都贴了。less的代码就不分享了，我自己收藏着。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="initial-scale=1, width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no" media="(device-height: 568px)"> <meta name="renderer" content="webkit"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch

css学习----边框属性

阅读更多关于 css学习----边框属性

CSS 边框属性参考手册：http://www.runoob.com/css3/css3-borders.html 边框属性有三个 border-radius--------------------------处理边框圆角 box-shadow----------------------------处理边框阴影 border-image--------------------------在使用图片创建边框: border-radius： length（或者百分比）---简写统一设置四个角每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。参考网址：http://www.runoob.com/css3/css3-border-radius.html 分开设置：　　border-top-left-radius:2em; 　　border-top-right-radius:2em; 　　border-bottom-right-radius:2em; 　　border-bottom-left-radius:2em; box-shadow: h-shadow v-shadow blur spread color inset; border-image: source slice

常用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

CSS盒模型

阅读更多关于 CSS盒模型

1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图：　　　　 2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。　　　　常用块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 　　　　常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 　　　　常用内联块状元素：<img>、<input> 　　　　（1）块状元素（也叫块级元素）特点每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。　　　　注：可以使用 display: block ，将元素转为块状元素，使之具备块状元素的特点。　　　　　　　　（2）内联元素（也叫行内元素）特点和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。　　　　注：可以使用 display: inline ，将元素转为内联元素，使之具备内联元素的特点。　　　　（3）内联块状元素特点

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之属性部分

这篇写的是今天的学习到的属性，一共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

订阅 css边框