border-image的拉伸和平铺

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#rd,#st{   height:100px;   border-width:30px;}

#rd{    border-image:url(5.3%20%E8%AF%BE%E5%A0%82/images/border.png) 20 stretch;}

#st{     border-image:url(5.3%20%E8%AF%BE%E5%A0%82/images/border.png) 20  round;}

</style>

</head>

<body>

<div id="rd"></div> <div id="st"></div>

</body>

</html>

时间: 2024-12-16 19:51:52

border-image的拉伸和平铺的相关文章

移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat

1.  效果: 浏览器: 手机模拟: 2.代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登陆</title> 6 <meta name="viewport" content="width=device-width, initial-scal

解决IE8浏览器下背景图片无法拉伸(铺满)的问题

IE8浏览器不兼容这种写法: 1 body{ 2 background-image:url(1.jpg); 3 background-size:cover; 4 background-repeat:no-repeat; 5 } 6 7 <body> 8 </body> 网上找了很多方法,包括使用滤镜什么的都不管用,后来发现其实很简单. 解决方法:使用<img>标签即可,如下: 1 img { 2 position: fixed; 3 width: 100%; 4 hei

QT Demo 之 imageelements

在学习了MouseArea和Text之后,这一节开始学习image相关的知识. 和上一节QT Demo 之 text一样,imageelements的入口也是一个LauncherList,然后添加了5个子example,下面我就针对每一个子example进行详细分析. borderimage.qml 首先看到的是borderimage.qml的主体结构是由一个BorderImageSelector和Flickable组成的: Rectangle { id: page width: 320 hei

H5C3--边框图片

类似于android的.9图片,目的是为了防止图片因为内容的扩展而导致图片拉伸失真. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 300px; 10 bor

Qt_Quick开发实战精解_3

事件处理:qml中如故一个事件想要能够被单击,就要在其上放置一个MouseArea元素signal: onClicked() onDoubleClicked() onPressed() onReleased() onPressAndHold() Rectangle{ width:600 height:800 color: "green"MouseArea{ anchors.fill: parent acceptedButtons: Qt.LeftButton | Qt.RightBut

[IOS] 详解图片局部拉伸 + 实现图片局部收缩

(图为微信首页右上角『+』效果) 当初还在开发WP7的时候,从IOS同事那边了解到类似微信以上功能的实现. Item条数不同,总高度也不同,这就需要将背景图片进行局部拉伸到响应的高度,并且保持上方的三角形不变型. 然而回想WP,没找到有API能对图片做此处理,只要图片显示比例与源图比例不一样,就会导致图片拉伸变形. (因此我只能让设计给一个右上角三角形,之后一个纯色长方形,纯色长方形拉伸后不会有问题.想要图片局部改变也行,得自己处理像素) 一. 局部拉伸 现在我们就来看看如何进行图片局部拉伸,相

通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt 样式表的思想很大程度上是来自于

CSS的学习使用

<head> <meta charset="UTF-8"> <title>CSS常用选择器</title> <!--HTML注释--> <style type="text/css"> /*CSS语法必须写在<style>标签中*/ /*CSS注释*/ [锁定] /*命名:body中table后+id="table" 如<table id="tabl

学习HTML5的第二周

*margin:外边距 * margin属性最多有四个 * ①只写一个margin属性均为这个值 * ②写两个值时意味着上又两个放向,下默认等于上,左默认等于又 * ③写三个值;上.又.下三个放下,左边默认等于右边 * ④写四个值,上又下左四个值 * ⑤写三个值加auto,控件居又显示 * margin:50px 30px 20px auto:距离父容器右边30个像素. * ⑥:margin:0 auto:设置控件在父容器中水平居中 * border有三个属性值,宽度,样式,颜色 * 原则上三个