圆角矩形

border:redius:左上  右上   右下  左下;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        .box1
        {
            width:150px;
            height:45px;
            border:1px solid blue;
            box-shadow: 1px 1px 1px 1px lightblue;
            border-radius: 10px 10px 10px 10px;
            margin-bottom: 60px;
        }
        .box2
        {
            width:150px;
            height:45px;
            border:1px solid blue;
            box-shadow: 1px 1px 1px 1px lightblue;
            border-radius: 20px 20px 20px 20px;
            margin-bottom:60px;
        }
        .box3
        {
            width:150px;
            height:45px;
            border:1px solid blue;
            box-shadow: 1px 1px 1px 1px lightblue;
            border-radius: 0 20px 0 0;
            margin-bottom: 60px;
        }
        .box4
        {
            width:150px;
            height:45px;
            border:1px solid blue;
            box-shadow: 1px 1px 1px 1px lightblue;
            border-radius: 50px;
            margin-bottom: 60px;
        }
        .box5
        {
            width:45px;
            height:45px;
            border:1px solid blue;
            box-shadow: 1px 1px 1px 1px lightblue;
            border-radius:50px;
        }    

    </style>
</head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
    <div class="box4">
    </div>
    <div class="box5">
    </div>
</html>

时间： 2024-10-25 05:37:22

圆角矩形的相关文章

Android圆角矩形创建工具RoundRect类

用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.

Android开发之自定义圆角矩形进度对话框

方式一:自定义对话框 public class ProgersssDialog extends Dialog { private ImageView img; private TextView txt; public ProgersssDialog(Context context) { super(context, R.style.progress_dialog); //加载布局文件 View view= View.inflate(context, R.layout.progress_dialo

html实现圆角矩形

问题:如何通过div+css以及定位来实现圆角矩形? 解决方法概述: 内容:首先在<body>标签内部里添加一个大层(大层用来固定整体大框架),然后大层内包含四个小层(四个小层里分别放四个圆角(事先用ps做好椭圆形形状,然后用切片工具切图 )) 样式:在<head>标签内部设置的css要有的属性: 1.position:relative: 2.宽和高; 3背景颜色; 4.边框线(用来调整四个原角的相对位置,调整好后可以将边框线设置删除) 在设置小层的css时,每个层里都要有的属性有

【VB6 GDI+进阶】通过拼接圆弧和线绘制圆角矩形

GDI+中没有直接绘制圆角矩形的函数.本篇将详细介绍如何通过拼接圆弧和线绘制圆角矩形,结尾附封装好的函数,可以直接调用. 1.GdipDrawArcI(绘制圆弧) 函数声明如下: Public Declare Function GdipDrawArcI _ Lib "gdiplus" (ByVal graphics As Long, _ ByVal Pen As Long, _ ByVal X As Long, _ ByVal Y As Long, _ ByVal Width As L

Android自定义ViewGroup（一）——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

android圆角矩形有边框无背景色

我们经常要用到圆角矩形,这也是现在的流行的样式..但是今天在工作中,遇到要写圆角矩形有边框但无背景色的button,本来想让妹子帮忙切图的,但是不想麻烦妹子,自己撑着,说可以做,结果弄了老半天菜搞定的,现在给大家看看,以后避免这麻烦...() <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/and

【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘在屏渲染’实现方法

iOS中为view添加圆角效果有两种方式,一种基于"离屏渲染"(off-screen-renderring),直接设置view的layer层参数即可简单实现,也很常用,但性能较低:另一种则是编写底层图形代码,实现'在屏渲染'(on-screen-renderring),可以大大优化绘制性能. iOS中圆角效果实现的最简单.最直接的方式,是直接修改View的layer层参数: /* 设置圆角半径 */ view.layer.cornerRadius = 5; /* 将边界以外的区域遮盖住

CSS3绘制圆角矩形的简单示例

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持. 对于一些浏览器,它们有其私有的圆角属性.如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius .效果见下图: FF 的圆角Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

css圆角矩形属性

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; css圆角矩形属性,布布扣,bubuko.com