border(边框)

如何用CSS调出边框

我们给p标签加一个边框试一下

p{
border:1px solid #ccc;/*这是缩写*/
}

第一个值是为边框的宽度

第二个值是为边框线样式为直线

第三个值是为边框的颜色

border-width(边框的宽度)

如果不调宽度的话默认边框是从左边到最右边。设置之后可以调节宽度。

border-top-width:;上

border-bottom-width:;下

border-left-width:;左

border-right-width:;右

border-style(边框线样式)

单个边框线调节样式

border-top-style:;(设置上边框)

border-bottom-style:;(设置下边框)

border-left-style:;(设置左边框)

border-right-style:;(设置右边框)

缩写div{ width300px;height100px;border-style:solie;}

      宽度            高度             边框样式

其他边框样式值

none:无轮廓。border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。

hidden:隐藏边框。IE7及以下尚不支持

dotted:点状轮廓。IE6下显示为dashed效果

dashed:虚线轮廓。

solid:实线轮廓

double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove:3D凹槽轮廓。

ridge:3D凸槽轮廓。

inset:3D凹边轮廓。

outset:3D凸边轮廓。

border-color(边框颜色)

还可以设置单个边的颜色

border-top-color:;上

border-right-color:;右

border-bottom-color:;下

border-left-color:;左

利用边框做出三角箭头

div{
width:;
height:;
border-top: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

圆角效果

所有角的半径为10px圆角矩形。

div{
width: 300px;
height: 300px;
background-color: black;
margin: 10px;
border-radius: 15px;/*上右左下*/
}

四个角的半径分别为左上角顺时针到左下角的半径的。

div{
width: 300px;
height: 300px;
background-color: red;
margin: 10px;
border-radius: 10px 15px 20px 30px;
}

分别设置每个角的垂直半径和水平半径,用斜杠隔开,第一个参数表示左上角开始顺时针的水平半径,第二个参数表示左上角开始顺时针的垂直半径。

div {
width: 300px;
height:300px;
background-color: green;
margin: 10px;
border-radius:40px 30px 20px 10
px/5px 10px 15px 20px;
}

画圆

div{
border-radius:50%
}

竖着的半圆

div{
height: 300px;
background-color: yellow;
width: 150px;
border-radius: 150px 0 0 150px;/*宽是高的一半*/
margin: 10px;
}

横着的半圆

div{
width: 300px;
background-color: yellowgreen;
height: 150px;
border-radius: 150px 150px 0 0;/*高是宽的一半*/
}

盒子阴影

书写格式:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色] [投影方式];

外阴影常规效果

div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow: 5px 5px 20px #000000;
}

外阴影模糊外延效果

div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow:5px 5px 5px 20px #000000 ;
}

内阴影效果

div{
width:100px;
height:100px;
background-color:#cccccc inset;
}

双内阴影效果

div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow:5px 5px 20px 2px #000000 inset,-2px -2px 5px 1px #ccc inset;
}

段落样式

行高(line-height)

p{
Width:300px;
Height:500px;
Line-height:150px;
}

行高是指内容的宽度到文字顶部之间的距离就是行高。

段落缩进

P{
Text-indent:em;
}

从左往右缩进了一个字符的间隔。数量不要太多。

段落对齐

Text-align:left | right | center | justify;

P{
Text-align:left;
}

文字间距

Letting-spacing:间距长度;

P{
Letting-spacing:10px;
}

每个字都会有间距间距距离取决于你的间距长度大小

文字溢出

Text-overtlow:clip | ellipsis

Clip的表现出来的效果是文字溢出的部分才会隐藏

Ellipsis的表现出来的效果是文字溢出的部分全部以...表示

如何用ELlipsis如何实现文字溢出时产生省略号的效果需要用到whtie-space:nowrap;(不换行)

Overflow:hidden;(隐藏溢出的部分)

Div{
width: 140px;
border: 1px solid #000;
white-space: nowrap;/*不换行*/
overflow: hidden;/*隐藏溢出于边框部分*/
text-overflow: ellipsis/clip;
}

我这里加了一个边框让你们看的更清楚。

背景样式

背景颜色

Background-color:transparent | color;(透明和颜色)

div{
Bakcground-color:#cccccc;
}
Div{
Background-color:transparent;
}

背景图片

Background-image:none | url

注意这个图片插入要写url。

Background-image:none | url

P{
Background-image:url(./图片名);
}

背景平铺方式

Background-repeat:repeat | no-repeat | repeat-x| repeat-y

repeat:平铺

P{
Background-repeat:on-repeat;
}

背景定位

Background-position:左对齐方式   上对齐方式

No-repeat:不平铺

X-repeat:从X轴开始平铺

Y-repeat:从Y轴开始平铺

P{
Background-color:right bottom;
}

CSS基础篇之选择符3的更多相关文章

  1. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  2. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  3. CSS全览_选择符+特指+单位+字体

    CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...

  4. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  5. 好程序员web前端分享CSS基础篇

    学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...

  6. 前端面试题——html与css基础篇

    整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...

  7. html/css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  8. html/css基础篇——html代码编写过程中的几个警惕点

    本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...

  9. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

随机推荐

  1. 【Java EE 学习 78 下】【数据采集系统第十天】【数据采集系统完成】

    一.项目源代码地址 二.项目演示

  2. RSA算法学习

    package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...

  3. 【leetcode】Add Two Numbers

    题目描述: You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  4. 利用C# Winform做Windows系统任务栏

    最近公司做一个考试系统,需要一个答题栏,要求:占用屏幕上方一部分区域,而且始终置顶,当其他窗口最大化时"答题栏"始终置前并且不遮挡最大化窗口的任何部分!就像windows任务栏一样 ...

  5. oracle函数简析

    (一).数值型函数(Number Functions) 数值型函数输入数字型参数并返回数值型的值.多数该类函数的返回值支持38位小数点,诸如:COS, COSH, EXP, LN, LOG, SIN, ...

  6. 在CHROME里安装 VIMIUM 插件, 方便操作

    VIMIUM 插件使用方法 VIMIUM 命令列表 网页导航 j, :向下滚动网页 k, :向上滚动网页 h : 向左滚动 l : 向右滚动 gg : 滚动到网页头部 G : 滚动到网页底部 :向上翻 ...

  7. PTAM 编译安装 on MAC(mavericks)

    最近有需要研究PTAM,所以需要在我的MAC上编译安装,整个过程让人非常崩溃各种问题陷阱.现在整理一下编译过程.我已经成功在MAC上编译.那么接下来我会详细讲解整个过程: 注意: 部分链接可能需要FQ ...

  8. 1、Spring In Action 4th笔记(1)

    Spring In Action 4th笔记(1) 2016-12-28 1.Spring是一个框架,致力于减轻JEE的开发,它有4个特点: 1.1 基于POJO(Plain Ordinary Jav ...

  9. 如果做好测试PM【转载】

    本文来源于:https://yq.aliyun.com/articles/14578?spm=5176.100238.yqhn2.14.Lcie4Y   摘要今年整体带了几个项目.我本人不是专业的PM ...

  10. 关于jquery简单操作简单表格

    最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现 ...