css。元素样式、边框样式

1.外边距  margin

缩写形式:

  margin:上边距  右边距  下边距  左边距

  margin:上下边距  左右边距

  margin:上边距  左右边距  下边距

2.内边距  padding

缩写形式:

  padding:上边距  右边距  下边距  左边距

  padding:上下边距  左右边距

  padding:上边距  左右边距  下边距

3.透明度 opacity:number

number值为0.0-1.0之间的小数

边框样式

1.边框线

  border-top-style  设置上边框线

  border-bottom-style  设置下边框线

  border-left-style  设置左边框线

  border-right-style  设置右边框线

2.边框宽度   border-width

  border-top-width  设置上边框宽度

  border-bottom-width  设置下边框宽度

  border-left-width  设置左边框宽度

  border-right-width  设置右边框宽度

3.边框颜色  border-color 

  border0-top-color  设置上边框颜色

  border-bottom-color  设置下边框颜色

  border-left-color  设置做边框颜色

  border-right-color  设置右边框颜色

4.边框样式缩写  border-width||border-style||border-color

div{
        width:300px;
        height:100px;
        border-style:solid;
        border-width:1px;
        border-color:#FF0000; 

}     

缩写后:

div{
        width:300px;
        height:100px;
        border:1px solid #FF0000;
}   

5.圆角效果

  圆:border-radius:50%

  

  

  

时间: 2024-10-31 11:38:54

css。元素样式、边框样式的相关文章

CSS元素、边框、背景样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只   对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

css中的边框样式

在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划线等.其具体的使用如下: border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset 例:div { width:300px; height:100px; bord

CSS实现对角边框样式

CSS实现对角框,边角加个边框.四角框 一:线性渐变方式: 鼠标悬停触发显示:hover { background: linear-gradient(to left, #043add, #043add) left top no-repeat, linear-gradient(to bottom, #043add, #043add) left top no-repeat, linear-gradient(to left, #043add, #043add) right bottom no-repe

table与tr td样式重叠 table样式边框变细

<table style="border:1px solid red;border-collapse:collapse;"> border-style 的属性 值 描述 none 定义无边框. hidden 与 "none" 相同.不过应用于表时除外,对于表,hidden 用于解决边框冲突. dotted 定义点状边框.在大多数浏览器中呈现为实线. dashed 定义虚线.在大多数浏览器中呈现为实线. solid 定义实线. double 定义双线.双线

CSS Border(边框)

CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式. p.none {border-style:none;} /*无边框*/ p.dotted {border-style:dotted;} /*虚线边框*/ p.dashed {border-style:dashed;} /*虚线边框*/ p.solid {border-style:s

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

css如何匹配第几个li元素并设置样式

css如何匹配第几个li元素并设置样式:如果有一个li元素列表,如果想设置指定位置li的样式.这个在以前可能需要稍微麻烦一些,比如在这个要设置的li元素上添加一个class或者id之类.但是上面的方式不够灵活,下面介绍一下如何通过伪类选择器实现此功能.代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" con

CSS盒模型--边框设置:border: 1px solid red(像素 样式 颜色 ),border-bottom:1px dotted #ccc

盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dashed

css元素定位样式

曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正常的文档流中无法移动定位.absolute :独立元素,元素从文档流中脱离,会相对于父层(static定位的父层除外)移动定位.relative : 相对定位,相对本身的位置移动定位,效果等同于相对于父层移动定位.fixed: 固定定位,相对于窗口移动定位.注:1.移动定位是指通过 top,bott