border(边框)

如何用CSS调出边框

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

  1. p{
  2. border1px solid #ccc;/*这是缩写*/
  3. }

第一个值是为边框的宽度

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

第三个值是为边框的颜色

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:;左

利用边框做出三角箭头

  1. div{
  2. width:;
  3. height:;
  4. border-top: 100px solid green;
  5. border-left: 100px solid transparent;
  6. border-right: 100px solid transparent;
  7. }

圆角效果

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

  1. div{
  2. width: 300px;
  3. height: 300px;
  4. background-color: black;
  5. margin: 10px;
  6. border-radius: 15px;/*上右左下*/
  7. }

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

  1. div{
  2. width: 300px;
  3. height: 300px;
  4. background-color: red;
  5. margin: 10px;
  6. border-radius: 10px 15px 20px 30px;
  7. }

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

  1. div {
  2. width: 300px;
  3. height:300px;
  4. background-color: green;
  5. margin: 10px;
  6. border-radius:40px 30px 20px 10
  7. px/5px 10px 15px 20px;
  8. }

画圆

  1. div{
  2. border-radius:50%
  3. }

竖着的半圆

  1. div{
  2. height: 300px;
  3. background-color: yellow;
  4. width: 150px;
  5. border-radius: 150px 0 0 150px;/*宽是高的一半*/
  6. margin: 10px;
  7. }

横着的半圆

  1. div{
  2. width: 300px;
  3. background-color: yellowgreen;
  4. height: 150px;
  5. border-radius: 150px 150px 0 0;/*高是宽的一半*/
  6. }

盒子阴影

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

外阴影常规效果

  1. div{
  2. width:100px;
  3. height:100px;
  4. background-color:#cccccc;
  5. box-shadow: 5px 5px 20px #000000;
  6. }

外阴影模糊外延效果

  1. div{
  2. width:100px;
  3. height:100px;
  4. background-color:#cccccc;
  5. box-shadow:5px 5px 5px 20px #000000 ;
  6. }

内阴影效果

  1. div{
  2. width:100px;
  3. height:100px;
  4. background-color:#cccccc inset;
  5. }

双内阴影效果

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

段落样式

行高(line-height)

  1. p{
  2. Width:300px;
  3. Height:500px;
  4. Line-height:150px
  5. }

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

段落缩进

  1. P{
  2. Text-indentem
  3. }

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

段落对齐

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

  1. P{
  2. Text-align:left;
  3. }

文字间距

Letting-spacing:间距长度;

  1. P{
  2. Letting-spacing:10px;
  3. }

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

文字溢出

Text-overtlow:clip | ellipsis

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

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

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

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

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

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

背景样式

背景颜色

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

  1. div{
  2. Bakcground-color:#cccccc;
  3. }
  1. Div{
  2. Background-color:transparent;
  3. }

背景图片

Background-image:none | url

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

  1. Background-imagenone | url
  2.  
  3. P{
  4. Background-imageurl(./图片名);
  5. }

背景平铺方式

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

repeat:平铺

  1. P{
  2. Background-repeaton-repeat
  3. }

背景定位

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

No-repeat:不平铺

X-repeat:从X轴开始平铺

Y-repeat:从Y轴开始平铺

  1. P{
  2. Background-colorright bottom
  3. }

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. mysql深入浅出的笔记(存储过程二)

    1.条件的定义和处理可以用来定义在处理过程中遇到问题时相应的处理步揍: DECLARE condition_name CONDITION FOR condition_value condition_v ...

  2. javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

    SSL握手失败:用JDK1.8做发邮件的功能遇到这种问题处理方式是:将目录 %JAVA_HOME%\...\jre\lib\security里的local_policy.jar,US_export_p ...

  3. Cocoapods - pod install 成功后找不到头文件解决

    问题描述:使用Cocoapods时,import 找不到头文件. 问题原因:这是因为还没设置头文件的目录. 解决办法:在项目的Target的里设置一下,添加cocoapods头文件目录:目录路径直接写 ...

  4. Android Studio中Button等控件的Text中字符串默认大写的解决方法

    初学Android的时候,在Android Studio中xml里面添加一个Button.EditText等控件后,它的Text总是会显示大写,即使你输入的字符串是小写也不行,控制字符串大小写的属性是 ...

  5. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  6. Maven仓库 国内镜像

    <repositories> <repository> <id>repo-mirror</id> <url>http://maven.net ...

  7. Scrapy shell调试网页的信息

    通过scrapy shell "http://www.thinkive.cn:10000/zentaopms/www/index.php?m=user&f=login"

  8. WebGL与three.js

    前面学习了一些webgl的基础知识,现在就用一下three.js写一个小例子,记录一下学习的过程. 效果图: 1.去github下载three.js,然后将它加载到网页中 <script src ...

  9. HTML基础知识

    一个完美的web前端攻城狮,所具备的专业素养有:HTML5.XHTML.CSS3.JavaScript.JQuery.PS.PHP等.所以说,我要学的东西还有很多... 没别得,我也是一个H5的初学者 ...

  10. FFmpeg纯净版解码 av_parser_parse2

    主要是通过av_parser_parse2拿到AVPaket数据,跟av_read_frame类似. 输入必须是只包含视频编码数据“裸流”(例如H.264.HEVC码流文件),而不能是包含封装格式的媒 ...