border:即为边框设置

  solid:实线

  dashed:虚线

  dotted:圆点线

css代码:

.c1{
width: 100%;
height: 50px;
border: 25px dotted red ;
}

效果图:

  

display:规定元素应该生成的框的类型

也有三个重要属性:

  none:隐藏,不显示框

  block:使成为块级标签

  inline:使成为内联标签

1、inline:使变成内联标签  

css代码:

.c1{
background-color: #00a2ca;
display: inline;
}

  html代码:

<body>
<div class="c1">这是我的测试</div>
</body>

  效果图:

2、block:使变成块级标签

  css代码:

a{
background-color: #00a2ca;
display: block;
}

  html代码

<body>
<a>我的测试</a>
</body>

  效果图

css之border,dispaly的更多相关文章

  1. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  2. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  3. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  4. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  5. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  6. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  7. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  8. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  9. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

随机推荐

  1. 【LeetCode OJ】Word Ladder II

    Problem Link: http://oj.leetcode.com/problems/word-ladder-ii/ Basically, this problem is same to Wor ...

  2. HDU5534--Partial Tree (完全背包)

    点击打开链接 思路:总度数为2n-2,由于每个节点都至少要有1个度,所以可以看做把剩余n-2个点放入n个节点的背包问题.dp[i]表示放入i个度后的最大值 #include<cstdio> ...

  3. CSS基础:text-overflow:ellipsis溢出文本

    <!DOCTYPE html><html> <head> <title> new document </title> <meta na ...

  4. php 数组 添加元素、删除元素

    拆分数组 PHP数组添加一个元素的方式: push(), arr[], Php代码 $arr = array(); array_push($arr, el1, el2 ... eln); 但其实有一种 ...

  5. 解决CSS小于12px的文字在谷歌浏览器显示问题

    做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...

  6. Qt之QCheckBox

    简述 QCheckBox继承自QAbstractButton,它提供了一个带文本标签的复选框. QCheckBox(复选框)和QRadioButton(单选框)都是选项按钮.这是因为它们都可以在开(选 ...

  7. Python 将pdf转换成txt(不处理图片)

    上一篇文章中已经介绍了简单的python爬网页下载文档,但下载后的文档多为doc或pdf,对于数据处理仍然有很多限制,所以将doc/pdf转换成txt显得尤为重要.查找了很多资料,在linux下要将d ...

  8. tyvj 1057 dp 变形背包

    P1057 金明的预算方案 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 NOIP2006 提高组 第二道 描述 金明今天很开心,家里购置的新房就要领钥匙了 ...

  9. Codeforces Round #303 (Div. 2) A 水

    A. Toy Cars time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  10. 获取验证码,60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...