<!DOCTYPE html>

<!--边框-->

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>边框</title>

</head>

<body>

<div style="border:4px dotted red">测试边框专用</div>

<div style="border:1px solid green">测试边框专用2</div>

<div style=" height:150px;width:150px;border:1px solid purple">测试边框专用3</div>

<div style=" height:150px;width:80%;border:1px solid pink">测试边框专用4</div>

<div style=" height:48px;width:80%;border:1px solid yellow;

font-size:16px;text-align:center;

line-height:48px;

font-weight: bold" >测试边框专用5</div>

<!--font-weight 字体加粗-->

<!--text-align 字体水平居中-->

<!--line-height 垂直方向根据标签高度居中-->

</body>

</html>

CSS之边框的更多相关文章

  1. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  2. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  3. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  4. css圆角边框

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  5. CSS之边框覆盖

    今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...

  6. DIV+CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  7. CSS之边框属性

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. border-style:dotted solid double dashed; border-style的属 ...

  8. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  9. HTML+CSS D07 边框、div

    1.边框(border) 常用表达 border-width px thin 定义细的边框. medium 默认.定义中等的边框. thick 定义粗的边框. length 允许您自定义边框的宽度. ...

  10. css盒子边框样式

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. redis基础学习总结

    学习目标: 1.redis特点及安装     2.redis键值操作     3.redis数据类型[string, link,set,orderset,hash]     4.事务     5.消息 ...

  2. protobuf example make backup

    # See README.txt. .PHONY: all cpp java python clean all: cpp #java python cpp: add_person_cpp list_p ...

  3. vue全家桶（vue-cli,vue-router,vue-resource,vuex）-1

    vue-cli # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my- ...

  4. inode 与black 特点与简介

    inodo为索引节点, 存放文件属性的信息(实际文件位置与容量信息 /black文件属性) 作用在格式化文件系统时候产生 创建一个文件就占用一个inode 数字相同为硬链接 black为实际数据/内容 ...

  5. JS实现数组的相减操作

    /** * 数组相减的方法 * @param {Array} a * @param {Array} b */ function arrSubtraction(a, b) { if (!a || !b ...

  6. leetcode题解 200. Number of Islands（其实就是一个深搜）

    题目: Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is s ...

  7. ES6 用Promise对象实现的 Ajax 操作

    下面是一个用Promise对象实现的 Ajax 操作的例子. const getJSON = function(url) { const promise = new Promise(function( ...

  8. 小程序仿QQ侧滑例子

    缩放:wxml <!--page/one/index.wxml--> <view class="page"> <view class="pa ...

  9. Linux命令学习之路——文档连接创建:ln

    使用权限:所有角色 使用方式:ln [ -options ] source target 作用:建立源文件与目标文件之间的连接 注意点: 1.连接分为硬连接和软连接,其中硬连接不能对目录做硬连接,且不 ...

  10. linux samba smb 在客户端无法连接使用

    netstat -nutlp查看是否启动进程 1.网络是否正常,是否可以ping通.2.Windows和Linux的防火墙全部关闭.3.samba的端口是否开启,tcp/139.tcp/445.udp ...