{"id":1239,"date":"2024-08-01T16:40:01","date_gmt":"2024-08-01T14:40:01","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1239"},"modified":"2024-08-01T16:40:01","modified_gmt":"2024-08-01T14:40:01","slug":"17-la-propiedad-outline-2","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/17-la-propiedad-outline-2\/","title":{"rendered":"17. La propiedad outline (2)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><em>outline-width<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>outline-width<\/em><\/strong> especifica el ancho del <strong><em>outline<\/em><\/strong>, y puede tener uno de los siguientes valores:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>thin<\/em> <\/strong>(normalmente 1px)<\/li>\n\n\n\n<li><strong><em>medium<\/em> <\/strong>(normalmente 3px)<\/li>\n\n\n\n<li><strong><em>thick<\/em> <\/strong>(normalmente 5px)<\/li>\n\n\n\n<li>un tama\u00f1o espec\u00edfico (in, px, pt, cm, em&#8230;)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"178\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/outline-width-1024x178.png\" alt=\"\" class=\"wp-image-1241\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/outline-width-1024x178.png 1024w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/outline-width-300x52.png 300w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/outline-width-768x133.png 768w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/08\/outline-width.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.ex1&nbsp;{\n&nbsp;&nbsp;border:&nbsp;1px solid black;\n&nbsp;&nbsp;outline-style:&nbsp;solid;\n&nbsp;&nbsp;outline-color:&nbsp;red;\n&nbsp; outline-width:&nbsp;thin;\n}\n\np.ex2&nbsp;{\n&nbsp; border:&nbsp;1px solid black;\n&nbsp; outline-style:&nbsp;solid;\n&nbsp; outline-color:&nbsp;red;\n&nbsp;&nbsp;outline-width:&nbsp;medium;\n}\n\np.ex3&nbsp;{\n&nbsp;&nbsp;border:&nbsp;1px solid black;\n&nbsp; outline-style:&nbsp;solid;\n&nbsp; outline-color:&nbsp;red;\n&nbsp;&nbsp;outline-width:&nbsp;thick;\n}\n\np.ex4&nbsp;{\n&nbsp;&nbsp;border:&nbsp;1px solid black;\n&nbsp;&nbsp;outline-style:&nbsp;solid;\n&nbsp; outline-color:&nbsp;red;\n&nbsp; outline-width:&nbsp;4px;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><em>outline-color<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>outline-color<\/em><\/strong> se utiliza para poner color a <strong><em>outline<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puede tener los siguientes valores:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nombre del color: especifica un nombre de color, por ejm \u00abred\u00bb<\/li>\n\n\n\n<li>HEX: especifica un valor hexadecimal, como \u00ab#ff0000\u00bb<\/li>\n\n\n\n<li>RGB: especifica un valor RGB, como rgb(255,0,0)<\/li>\n\n\n\n<li>HSL: especifica un valor HSL, como hsl(0,100%,50%)<\/li>\n\n\n\n<li>invertir: realiza una inversi\u00f3n de color (lo que garantiza que el contorno sea visible, independientemente del color de fondo)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.ex1&nbsp;{\n&nbsp; border:&nbsp;2px solid black;\n&nbsp; outline-style:&nbsp;solid;\n&nbsp;&nbsp;outline-color:&nbsp;red;\n}\n\np.ex2&nbsp;{\n&nbsp;&nbsp;border:&nbsp;2px solid black;\n&nbsp; outline-style:&nbsp;dotted;\n&nbsp; outline-color:&nbsp;blue;\n}\n\np.ex3&nbsp;{\n&nbsp;&nbsp;border:&nbsp;2px solid black;\n&nbsp;&nbsp;outline-style:&nbsp;outset;\n&nbsp;&nbsp;outline-color:&nbsp;grey;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>outline<\/em> <\/strong>se especifica como uno, dos o tres valores de la lista anterior. El orden de los valores no importa.El siguiente ejemplo muestra algunos contornos especificados con la propiedad de contorno abreviado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p.ex1&nbsp;{outline:&nbsp;dashed;}\np.ex2&nbsp;{outline:&nbsp;dotted red;}\np.ex3&nbsp;{outline:&nbsp;5px solid yellow;}\np.ex4&nbsp;{outline:&nbsp;thick ridge pink;}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><em>outline-offset<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad <strong><em>outline-offset<\/em><\/strong> agrega espacio entre un contorno y el borde\/borde de un elemento. El espacio entre un elemento y su contorno es transparente. El siguiente ejemplo especifica un contorno de 15px fuera del borde del borde.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p&nbsp;{\n&nbsp;&nbsp;margin:&nbsp;30px;\n&nbsp; border:&nbsp;1px solid black;\n&nbsp; outline:&nbsp;1px solid red;\n&nbsp; outline-offset:&nbsp;15px;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>outline-width La propiedad outline-width especifica el ancho del outline, y puede tener uno de los siguientes valores:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":16,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1239","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"outline-width La propiedad outline-width especifica el ancho del outline, y puede tener uno de los siguientes valores:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1239\/revisions"}],"predecessor-version":[{"id":1242,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1239\/revisions\/1242"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}