css实例--边框

border-image:

  • border-image-source
  • border-image-slice:裁剪,可以是像素值或百分比;
  • border-image-width
  • border-image-outset:边框偏离基准值的大小,默认0;
  • border-image-repeat:stretch拉伸/repeat重复/round平铺;
    • demo  //注意中间带有参数顺序的3个参数之间需要使用斜杠
    • 这个值要考虑不同浏览器的兼容性;
    • 在firefox下看不到边框的话,先检查border-style:solid;

border-radius:

  • border-top/button-left/right-radius
  • border-radius:100px 25px 50px 50px / 50px 25px 50px 25px;

border-shadow:h-shadow v-shadow [blur/*阴影模糊距离*/  spread/*阴影尺寸*/   color inset];

  • 例子:

    • box-shadow:5px 8px 5px 3px red;

    • box-shadow:5px 8px 5px 3px red inset;

时间: 2024-11-07 14:41:31

css实例--边框的相关文章

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

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

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo

CSS实例 display display 边距

1 CSS学习大纲 2 在标签上设置style属性: 3 background-color:#2459a2 ; 4 height:48px ; 5 编写CSS样式: 6 1.标签的style属性 7 2.写在head里面,style标签中写样式 8 ID选择器 9 #i1{ 10 background-color:2459a2 ; 11 height:48px ; 12 } 13 class选择器 ***** 14 .c1{ 15 background - color: 2459a2 ; 16

CSS 实例

CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面的其余部分滚动) 在一个声明的所有背景属性 高级的背景例子 背景属性的解释 CSS文本 设置不同元素的文本颜色 文本对齐 移除链接下划线 装饰文字 控制文本中的字母 缩进文本 指定了字符之间的空间 指定了行与行之间的空间 设置元素的文本方向 增加单词之间的空格 在一个元素内禁用文字换行 内部文字图像

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F

html+CSS实例效果(5):em实现倒三角的提示效果

<div class="c_page mt14 clearfix"> <span class="record">1/14P   134Records</span> <span class="first disable"><em class="bar"></em><em class="leftjib"></em>&

CSS实例:鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

html+CSS实例效果(2):边框为阴影及DIV内容垂直居中效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纯css圆角边框

第一章.基本的圆角框 原创:冰极峰 转载请注明出处 2009年11月30日10:19:34 文章导航: 第一章:基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0 序言:在我的文章<超圆滑圆角框的半完美解决方案>中已经总结了七种不同的圆角框解决方案,基本上总结完了目前网络上比较流行的圆角框实现方案.而在我的另一篇文章<无图片山顶角>中又是一个另类的实现方法. 纯CSS实 现圆角框是一件大家都说烂了的事件,我也写过两篇总结文章,为什么还会